Sleeping in an infinite loop in Javascript

Question

I have a program which should randomly change the position of a cross in a table every half a second forever, but I can't find a way to make the program wait for half a second without it hanging.

The following is my code, where the sleep(0.5) should be switched with something different:

<!DOCTYPE html>
<html>
<body>
    <table>
        <tr>
            <td id="0x0">X</td>
            <td id="1x0">X</td>
            <td id="2x0">X</td>
        </tr>
        <tr>
            <td id="0x1">X</td>
            <td id="1x1">X</td>
            <td id="2x1">X</td>
        </tr>
        <tr>
            <td id="0x2">X</td>
            <td id="1x2">X</td>
            <td id="2x2">X</td>
        </tr>
    </table>
    <script>
        for(;;) {
            var x = Math.floor(Math.random()*2);
            var y = Math.floor(Math.random()*2);

            id = x.toString() + "x" + y.toString();         
            document.getElementById(id).innerHTML = "O";               
            sleep(0.5);
            document.getElementById(id).innerHTML = "X";
        }
    </script>
</body>
</html>

@AndrewIce Please refer to http://w3fools.com and stop spamming! `:P` Reference to http://w3schools.com is considered spam. — Praveen Kumar Purushothaman, Sep 22 '15 at 13:50
Maybe a better duplicate: [Is there any method to sleep in javascript in a loop?](http://stackoverflow.com/q/12230612/218196). — Felix Kling, Sep 22 '15 at 13:51

Tushar · Answer 1 · 2015-09-22T13:52:49.820

Javascript don't have function named sleep, but you can use setTiemout to execute a function after given time interval.

I'll also recommend you to use setInterval instead of infinite for loop to execute set of commands after specified time interval.

Another thing is that you're using floor on the random value, which will always be either 0 or 1 and it'll be never 2. Use Math.round to round off the value to the nearest number. So it'll select all the values.

setInterval(function() {
  var x = Math.round(Math.random() * 2);
  var y = Math.round(Math.random() * 2);

  id = x.toString() + "x" + y.toString();
  document.getElementById(id).innerHTML = "O";

  setTimeout(function() {
    document.getElementById(id).innerHTML = "X";
  }, 500);
}, 100);

<table>
  <tr>
    <td id="0x0">X</td>
    <td id="1x0">X</td>
    <td id="2x0">X</td>
  </tr>
  <tr>
    <td id="0x1">X</td>
    <td id="1x1">X</td>
    <td id="2x1">X</td>
  </tr>
  <tr>
    <td id="0x2">X</td>
    <td id="1x2">X</td>
    <td id="2x2">X</td>
  </tr>
</table>

score 1 · Answer 2 · answered Sep 22 '15 at 13:45

Just use setTimeout instead of sleep:

function doSomething () {

    document.getElementById(id).innerHTML = "X";

    var x = Math.floor(Math.random()*2);
    var y = Math.floor(Math.random()*2);

    id = x.toString() + "x" + y.toString();         
    document.getElementById(id).innerHTML = "O";               

    setTimeout(doSomething, 500);

}

Or a setInterval way:

setInterval(function () {

    document.getElementById(id).innerHTML = "X";

    var x = Math.floor(Math.random()*2);
    var y = Math.floor(Math.random()*2);

    id = x.toString() + "x" + y.toString();         
    document.getElementById(id).innerHTML = "O";               

}, 500);

score 0 · Answer 3 · answered Sep 22 '15 at 13:46

0

could be easier to use setInterval which will call a function for you every x thousandths of a second.

setInterval(function(){
   var x = Math.floor(Math.random()*2);
   var y = Math.floor(Math.random()*2);
   id = x.toString() + "x" + y.toString();         
   document.getElementById(id).innerHTML = "O";               
   document.getElementById(id).innerHTML = "X";
}, 500);

answered Sep 22 '15 at 13:46

BenG

14,826
5
45
60

I think you didn't understand the question, OP want to wait for half second after setting the value and then want to reset the value again please check my answer above. – Tushar Sep 22 '15 at 13:50

score 0 · Answer 4 · answered Sep 22 '15 at 13:50

It looks like you need to use javascript's setInterval function instead. So, if you wanted your code to say, print something out every 10 seconds you'd do something like this:

window.setInterval(printString, 10000);

var printString = function() {
    console.log("hello world");
}

The first argument is the function or operation you wish to perform and the second is the interval (in milliseconds) between each execution.

Sleeping in an infinite loop in Javascript

4 Answers4