JavaScript - Repeat only javascript code

Question

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

Post your code - are you putting all of your other code inside setInterval? If so, take it out - it does not reload the whole site unless you are doing something wrong. — VSO
– VSO, Commented May 20, 2017 at 20:33
@DanielH I just wanted it to be fast. Why? Is that the problem? — csf30816
– csf30816, Commented May 20, 2017 at 20:39
You can make a mini example of this in a jsFiddle - with just 3 emojis or something... and clarify what you want to happen maybe? — sheriffderek
– sheriffderek, Commented May 20, 2017 at 20:41
Based on your other questions along this line - it may be prudent to check out a stable emoji library - unicodey.com/js-emoji/demo/demo.htm - since they've likely gone through all of these trials — sheriffderek
– sheriffderek, Commented May 20, 2017 at 20:54

sheriffderek · Accepted Answer · 2017-05-20 21:16:18Z

1

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.

answered May 20, 2017 at 21:16

sheriffderek

9,0736 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

csf30816 Over a year ago

OK, I see. That would be complex, but it would work.

csf30816 Over a year ago

Any idea how I could do that?

csf30816 Over a year ago

Would document.getElementsByTagName('body').addEventListener('change', function() { work, I think it will

sheriffderek Over a year ago

I don't think that 'change' is an event for body... you could add an event to the input... the smaller the scope for observing changes - the better.

Daniel Beck · Accepted Answer · 2017-05-20 21:18:00Z

1

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

edited May 20, 2017 at 21:18

answered May 20, 2017 at 21:11

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

3 Comments

Daniel Beck Over a year ago

No. Whatever function is currently receiving new chat messages and inserting them into the DOM, just needs to run your search-and-replace over the text it's receiving before inserting it into the DOM.

csf30816 Over a year ago

OK, but what if the emoji js is linked in to the head using a <script src=... tag (which is how it is) then how would I do it?

Daniel Beck Over a year ago

By the "emoji js" do you mean the search-and-replace function you've shown here? It doesn't make any difference how the function is linked into the document, just apply it to new message contents instead of applying it constantly on the whole page.

VSO · Accepted Answer · 2017-05-20 20:46:00Z

0

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>

answered May 20, 2017 at 20:46

VSO

12.8k28 gold badges119 silver badges203 bronze badges

1 Comment

VSO Over a year ago

Np, I realize that this doesn't solve your problem, but it's what you asked about originally.

Michał Sałaciński · Accepted Answer · 2017-05-20 21:26:04Z

0

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

answered May 20, 2017 at 21:26

Michał Sałaciński

2,2661 gold badge13 silver badges10 bronze badges

1 Comment

csf30816 Over a year ago

thanks. Although I am not just using the emojis for the chat, that is one reason

Collectives™ on Stack Overflow

JavaScript - Repeat only javascript code

4 Answers 4

4 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related