havz havz - 5 months ago 21
Javascript Question

setTimeout() method inside a while loop

I have read the relevant pages on w3schools and other similar questions here but cannot seem to understand what's wrong about the following bit :

var myfunc03 = function (i) {
document.getElementById('d01').innerHTML += 100-i+"<br>";
};

var myFunc01 = function() {
i=0;
while (i<100) {
setTimeout(myfunc03(i), 1000)
i++;
}
};


when

myFunc01();


is run, there's no pause whatsoever and all possible values for i is listed at once. Is there a logical mistake here?

Answer

While loop will not wait to setTimeout() to complete.You need to set different time delay to each for execute them with different time and use closure for holding the value of i. Also in your case function will be executed initially and return value is setting as argument in setTimeout(), so either you need to call the function inside an anonymous function or set the function directly.

var myFunc01 = function() {
  var i = 0;
  while (i < 100) {
    (function(i) {
      setTimeout(function() {
        document.getElementById('d01').innerHTML += 100 - i + "<br>";
      }, 1000 * i)
    })(i++)
  }
};

myFunc01();
<span id="d01"></span>


Although setInterval() can be used here

var myFunc01 = function() {
  var i = 0;
  // store the interval id to clear in future
  var intr = setInterval(function() {
    document.getElementById('d01').innerHTML += 100 - i + "<br>";
    // clear the interval if `i` reached 100
    if (++i == 100) clearInterval(intr);
  }, 1000)

}

myFunc01();
<span id="d01"></span>

Comments