JavaScript -仅重复javascript代码

Question

所以我的代码会永远重复我的函数，尽管当我这样做的时候，我的站点的其余部分也会重复它自己。因此，当我尝试在文本框中键入时，它不允许我这样做。当我将鼠标悬停在物体上时，它们会眨眼。我该如何解决这个问题呢？

代码：

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

现在，您的setInterval每秒替换整个文档正文的次数超过三次。我们应该说，从性能的角度来看，这有点问题；每次setInterval运行时，浏览器都必须从头开始重新绘制整个网页。这还意味着您不能在页面内的文本字段中键入内容，因为每秒您会用一个新的文本字段替换该文本字段三次。

所以别这么做。

你真正想要实现的是：

我想要它，以便在我的聊天页面上，当有人给我发送带有表情符号的消息时，它会更新为表情符号图像

...so而不是不断地在整个页面上运行代码，而是只在每条新消息的内容上运行它，并且只有当新消息到达时，才将新消息插入到DOM中。不需要重新绘制页面的其余部分，因为您已经对现有消息进行了搜索和替换；需要进行的任何替换操作都已经完成。

具体如何做将取决于您当前如何接收新消息文本并将其插入到DOM中，但基本上现在的流程是“接收新消息并按原样将其插入到DOM中；同时在整个文档上不断运行搜索和替换”。它应该是“接收新消息，根据需要搜索和替换新消息内容，将结果插入到DOM中”。

Answer 2

你的jsFiddle非常有用：https://jsfiddle.net/csf30816/gxh4675j/3/

你是在innerHTML全身。也许你可以观察输入，改变页面的一小块特定区域。

Answer 3

运行时间间隔不会重新加载整个文档，请参阅PLUNK here。你的问题出在别的地方。例如。

  <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>