Infinite Loop Issue in Javascript

Question

The following code is intended to display a 0, then a few seconds later change this to 1, then back to 0, and so on, ad infinitum.

The problem is this (obviously) freezes the webpage itself. I could use an animated gif but want to expand this further and code becomes the better choice.

How might I do this?

<div id="bit" style="width: 100px; height: 100px; margin: auto; border: 1px solid #000; text-align: center;"></div>
<script>
    var bitValue = 0;
    for (;;) {
        setTimeout(showBit(), 2000);
    }

    function showBit() {
        document.getElementById("bit").innerHTML = bitValue;
        bitValue = Math.abs(bitValue - 1);
    }
</script>

setTimeout(showBit(), 2000); is equivalent to var tmp = showBit(); setTimeout(tmp, 2000);. Since showBit() returns undefined, your setTimeout call is invalid (you're passing it undefined instead of a function). — melpomene
– melpomene, Commented May 21, 2018 at 9:39
Thanks. I used CertainPerformance's response and have it all working! :) — Gazzieh
– Gazzieh, Commented May 21, 2018 at 9:44

Jonas Wilms · Accepted Answer · 2018-05-21 09:46:02Z

2

A few things went wrong:

 setTimeout(showBit(), 1000);

must be:

setTimeout(showBit, 100);

as you want to pass a function and not execute it immeadiately. Another thing is that you cannot just do

 for(;;) { /*...*/ }

as that blocks the browser forever. You would have to do it asynchronously:

  const delay = ms => new Promise(res => setTimeout(res, ms));

 (async function() {
   while(true) {
      await delay(1000);
      showBit();
   }
 })();

Or a bit simpler with a pseudorecursive timeout:

(function next() {
   showBit();
   setTimeout(next, 1000);
 })();

Or if you dont want to do that manually, just use setInterval:

 setInterval(showBit, 1000);

edited May 21, 2018 at 9:46

answered May 21, 2018 at 9:40

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

2 Comments

Gazzieh Over a year ago

I had missed the first point. I was aware of the send (asynchronous running) but your code makes it clearer; thank you.

Jonas Wilms Over a year ago

Glad to help :)

user6290501 · Accepted Answer · 2018-05-21 09:46:44Z

0

Like @CertainPerformance said, setInterval should be used instead. Here are a few good examples of how it can be used - https://www.w3schools.com/jsref/met_win_setinterval.asp

answered May 21, 2018 at 9:46

user6290501

2 Comments

Jonas Wilms Over a year ago

This answer is "in another castle". A visitor that finds this thread should be able to understand your answer without visiting external sites (that might be offline then). Additionaly please don't recommend w3schools, IMO they are oversimplifying things, i would rather recommend MDN.

user6290501 Over a year ago

That's your opinion. I did mention the person giving the correct answer. W3schools is a great reference if you just need to lookup something small. I do agree that MDN is great. But here, w3schools explains the use well.

衛藤小鳩 · Accepted Answer · 2018-05-21 09:59:53Z

0

Use **setInterval()** with **Math.round** and **Math.random**? var time = setInterval(f, 2000); function f() { document.getElementById("bit").innerHTML = Math.round(Math.random()); }

Use if

var time = setInterval(function() {
    if (document.getElementById("bit").innerHTML == 0) {
        document.getElementById("bit").innerHTML = 1;
    }
    else {
        document.getElementById("bit").innerHTML = 0;
    }
}, 2000);

edited May 21, 2018 at 9:59

answered May 21, 2018 at 9:42

衛藤小鳩

12 bronze badges

2 Comments

Gazzieh Over a year ago

Since this is only to run as 1 then 0, random would not make sense...yet! This is perfect for the next step, however. Thank you.

Jonas Wilms Over a year ago

Math.random takes no arguments.

Collectives™ on Stack Overflow

Infinite Loop Issue in Javascript

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related