JavaScript - リピートのみjavascript code

Question

私は自分の機能を永遠に繰り返すコードを持っています。だから私はテキストボックスに入力しようとすると、それは私をさせません。私が物事の上を動かすと、彼らは点滅する。これをどうすれば解決できますか？

コード：PLUNK hereを参照して、文書全体をリロードしませんインターバルを実行

window.onload = function() { 
    setInterval(function() { 
    function replaceTextByImage(pattern, src) { 
     document.body.innerHTML = document.body.innerHTML.replace(new RegExp(pattern, 'g'), '<span style="background-size: 100% 100%; background-image: url(\'' + src + '\');">&nbsp&nbsp&nbsp&nbsp</span>'); 
    } 

    console.log("Repeating Emoji Convert"); 

    // Smile 
    replaceTextByImage(':\\)', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg'); 
    replaceTextByImage(':smile:', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg'); 

    // Tongue 
    replaceTextByImage(':P', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg'); 
    replaceTextByImage(':tongue:', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg'); 

    // Big Smile 
    replaceTextByImage(':D', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg'); 
    replaceTextByImage(':big-smile:', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg'); 

    // Frown ☹ 
    replaceTextByImage(':\\(', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 
    replaceTextByImage(':frown:', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 
    replaceTextByImage('☹', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 

    // Wink 
    replaceTextByImage(';\\)', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg'); 
    replaceTextByImage(':wink:', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg'); 

    // Dizzy 
    replaceTextByImage('xO', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 
    replaceTextByImage(':dizzy:', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 
    replaceTextByImage(':dead:', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 

    // Cry 
    replaceTextByImage(':crying:', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 
    replaceTextByImage(':cry:', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 

    // Big Frown 
    replaceTextByImage('D:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 
    replaceTextByImage(':big-frown:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 
    replaceTextByImage(':gasp:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 

    // Heart Eyes 
    replaceTextByImage(':heart-eyes:', 'https://csf30816.github.io/svg-emoji/emojis/heart-eyes.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/heart-eyes.svg'); 

    // Neutral 
    replaceTextByImage(':neutral:', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 
    replaceTextByImage(':\\|', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 
    replaceTextByImage(':plain:', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 

    // Raging 
    replaceTextByImage(':raging:', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg'); 
    replaceTextByImage(':angry-red:', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg'); 

    // Mad 
    replaceTextByImage(':angry:', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg'); 
    replaceTextByImage(':mad:', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg'); 

    // Teeth 
    replaceTextByImage(':teeth:', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg'); 
    replaceTextByImage(':wide-smile:', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg'); 

    // Thumbs Up 
    replaceTextByImage(':thumbs-up:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg'); 
    replaceTextByImage(':up:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg'); 

    // Thumbs Down 
    replaceTextByImage(':thumbs-down:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg'); 
    replaceTextByImage(':down:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg'); 
    }, 300); 
}; 

Answer 1

。あなたの問題は他のところにあります。例えば。

<body> 
    <input type = "text" placeholder = "Type something" /> 
    <br /> 
    <div id="randomText">Random Text</div> 
    <script> 
     function repeatSomething() { 
     var rand = Math.random(); 
     var randDiv = document.getElementById('randomText'); 
     randDiv.innerHTML = rand; 
     } 
     setInterval(repeatSomething, 1000); 
    </script> 
    </body> 

Answer 2

ここで、setIntervalはドキュメント本体全体を1秒あたり3回以上置き換えています。これは、パフォーマンスの点ではと若干問題があると言えば、です。 setIntervalが実行されるたびに、Webページ全体を最初から再描画する必要があります。また、1秒に3回、テキストフィールドを新しいテキストフィールドに置き換えているため、ページ内のテキストフィールドに入力することはできません。

だからやってはいけません。あなたが本当に達成しようとしている何

がある：ように誰かが私にそれが絵文字画像

に更新絵文字でメッセージを送信するとき

私は私のチャットページにそれをしたいです...あなたのコードをページ全体で常に実行するのではなく、新しいメッセージがDOMに挿入される前に、その新しいメッセージが到着したときにのみ、新しいメッセージの内容全体でコードを実行します。既存のメッセージに対して既に検索と置換を行っているため、ページの残りの部分を再描画する必要はありません。行わなければならない置換は既に行われている。

これは、現在新しいメッセージテキストを受け取ってDOMに挿入する方法に依存しますが、基本的には現在、「新しいメッセージを受信して​​DOMに挿入します一方で、文書全体にわたって絶えず検索と置換を実行しています。代わりに、「新しいメッセージを受信し、必要に応じて新しいメッセージの内容を検索および置換し、結果をDOMに挿入する」必要があります。

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.