CODEWITHSUNDEEP
javascripthtmlcss
csf30816
csf30816

Reputation: 129

JavaScript - Repeat only javascript code

So I have code that repeats my function forever, although when I make that happen the rest of my site repeats itself too. So When I try to type in text box it does not let me. And when I hover over things they blink. How can I fix this?

Code:

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);
};

Upvotes: 1

Views: 323

Answers (4)

MichaΕ‚ SaΕ‚aciΕ„ski
MichaΕ‚ SaΕ‚aciΕ„ski

Reputation: 2266

You are not realoading page as F5 does it, but rather "reprinting" it, re-evaluating everything, and that's definitely not a way to go, that's terrible user experience, even less frequent. Overall, calling that function X times inside 1 loop is still bad, and as others pointed out, it'll be better to have control over incoming messages. But if for some reasons you wish to check & replace everything inside the interval, this might be a starting point: pen

    function replaceTextByImage(pattern, src) {
        var n, walk=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,null,false);
  while(n=walk.nextNode()) {
    if (new RegExp(pattern).test(n.innerHTML)) n.innerHTML = n.innerHTML.replace(new RegExp(pattern, 'g'), '<span style="background-size: 100% 100%; background-image: url(\'' + src + '\');">&nbsp&nbsp&nbsp&nbsp</span>');
  }
    }

Upvotes: 0

Daniel Beck
Daniel Beck

Reputation: 21485

Right now your setInterval is replacing the entire document body more than three times per second. This is, shall we say, somewhat problematic from a performance point of view; every time that setInterval runs the browser has to redraw the entire web page from scratch. It also means you can't type into a text field inside the page, because three times every second you're replacing that text field with a new one.

So don't do that.

What you're really trying to accomplish is:

I want it so that on my chat page when someone sends me a message with an emoji it updates to the emoji image

...so instead of running your code constantly over the entire page, run it only over the contents of each new message, and only when that new message arrives, before inserting that new message into the DOM. There's no need to be redrawing the rest of the page, because you've already done your search-and-replace against the existing messages; any substitutions that need to be done will already have been done.

How, exactly, to do that is going to depend on how you're currently receiving new message text and inserting it into the DOM, but basically the flow right now is "receive new message and insert it into the DOM as is; meanwhile constantly run search-and-replace over the entire document". It instead should be "receive new message, search-and-replace the contents of that new message as needed, insert the results into the DOM."

Upvotes: 1

sheriffderek
sheriffderek

Reputation: 9043

Your jsFiddle is really helpful right off the bat: https://jsfiddle.net/csf30816/gxh4675j/3/

You are innerHTMLing the whole body. Maybe you can just watch the input and change a small specific area of the page.

Upvotes: 1

VSO
VSO

Reputation: 12646

Running an interval does NOT reload the whole document, see the PLUNK here. Your problem lies elsewhere. E.g. 

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

Upvotes: 0

Related Questions