setTimeout() method inside a while loop [duplicate]

Question

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?

That of course highlights his second mistake -- accessing a modified variable (i) from within a closure. When the timeout fires, i will have changed to whatever the last one is. — Dawson Toth
– Dawson Toth, Commented Jun 9, 2016 at 14:04
setTimeout expects a Function as the first parameter but you're passing the result of myfunc03 (which is underfined because you're invoking it) — haim770
– haim770, Commented Jun 9, 2016 at 14:06

ballade4op52 · Accepted Answer · 2018-02-07 22:41:12Z

37

The while loop will not wait for setTimeout() to complete. You need to set different time delay for each to execute them with different times 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>

edited Feb 7, 2018 at 22:41

ballade4op52

2,2675 gold badges29 silver badges44 bronze badges

answered Jun 9, 2016 at 14:05

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

2 Comments

vapcguy Over a year ago

Thorough explanation. I was running into the same issue. Great examples, thanks!

Vasin Yuriy Over a year ago

First workaround not working for me. All actions inside setTimeout executing simultaneously. All like in this article - coderwall.com/p/_ppzrw/be-careful-with-settimeout-in-loops Looks like it works inside "for" but not "while" ( Second works fine!

Community · Accepted Answer · 2020-06-20 09:12:55Z

You can do it more simply with recursion:

var i = 0;
function f1() { ... };   
function f() {
    f1();
    i += 1;
    setTimeout(function() {
        if(i < 100) {
            f();
        }
    }, 1000);
}
f();

Example

var i = 0;

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

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

myFunc01();

<div id="d01"></div>

A reusable function

function say(sentence) {
  console.log(sentence);
}

function sayHello() {
  say("Hello!");
}

var fn = sayHello;
var count = 10;
var ms = 1000;

function repeat(fn, count, ms) {
  var i = 0;

  function f() {
    fn();
    i += 1;
    setTimeout(function() {
      if (i < count) {
        f();
      }
    }, ms);
  }

  f();
}

repeat(fn, count, ms);

shoesel · Accepted Answer · 2019-10-22 14:25:38Z

4

while waiting for setTimeout :

(async () => {
  var i = 0;
  while (await new Promise(resolve => setTimeout(() => resolve(i++), 1000)) < 100) {
    console.log("I get printed 100 times every second");
  }
})();

answered Oct 22, 2019 at 14:25

shoesel

1,2589 silver badges16 bronze badges

Comments

tarkh · Accepted Answer · 2022-08-06 19:48:09Z

4

You can create Timeout function and use it with async/await

// Timeout function
const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// Run some loop in async function
(async () => {
  // Loop for 5 times
  for(let i = 0; i <= 5; i++) {
    // Do some stuff
    console.log(`Some stuff ${i}`);
    // Wait for timeout 1000 ms
    await timeout(1000);
  }
})();

answered Aug 6, 2022 at 19:48

tarkh

2,5691 gold badge11 silver badges14 bronze badges

Comments

hoozecn · Accepted Answer · 2016-06-09 14:16:20Z

1

Yes. There are 2 problems in your code:

The setTimeout function accept a function as the first argument, but in your code, myfunc03(i) returns nothing
The while loop won't meet you needs, instead, you have to use recursive function. Since the second function should be invoked after the first timeout is fired.

Sample code:

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

var myFunc01 = function() {
  myfunc03(0);
};

myFunc01();

<div id="d01"></div>

answered Jun 9, 2016 at 14:16

hoozecn

4874 silver badges14 bronze badges

Comments

Utkarsh Sinha · Accepted Answer · 2016-06-09 20:42:56Z

0

I think you are missing a semicolon on the setTimeout and you should try passing the arguments in the below fashion:
```
setTimeout(myfunc03, 1000*i, i); 
```

edited Jun 9, 2016 at 20:42

answered Jun 9, 2016 at 14:13

Utkarsh Sinha

9712 gold badges12 silver badges32 bronze badges

2 Comments

Rick Hitchcock Over a year ago

For modern browsers, this is the best solution, because it avoids the awkwardness of closures. However, the second parameter should be 1000 * i; otherwise, you're setting 100 timeouts at the same time to 1s. Compare jsfiddle.net/ofpp26or/2 to jsfiddle.net/ofpp26or

Utkarsh Sinha Over a year ago

Yea, that's correct. I intended to only show syntax-wise, as that might have caused js-errors. He might use time-parameters as per his logic requirements.

Fabio Ribeiro de Carvalho · Accepted Answer · 2021-03-27 17:12:24Z

One simple option is use setInterval() method instead. The setInterval will execute the code everytime as a loop until you break it with the clearInterval() method.

Example:

var index = 0;
let incrementEveryHalfSecond = setInterval(function(){
  index++;
  document.querySelector("body").innerHTML += index+'</br>';
  if(index == 10) clearInterval(incrementEveryHalfSecond)
}, 500)

<body></body>

Observe that you decide break of loop, passing the variable that is store the setInterval method as parameter in the clearInterval method. Now you can create functions to get a better clear code. w3schools documentation

Question answer:[from 100 to 1] I inverted the order of i to simplify, but you can also do with "100-i".

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

var myFunc01 = function() {
  let i=100;
  let incrementEveryOneSecond = setInterval(function(){
    myfunc03(i);
    if(--i == 0) clearInterval(incrementEveryOneSecond);
  }, 1000) 
 
};
myFunc01();

 <span id="d01"></span>

Viral Shah · Accepted Answer · 2016-06-09 14:42:30Z

-1

the while method runs quickly and all timeout almost gets executed after first second.. what you can do is

Instead of while call $timeout from myfunc03 for next value
inside your while call timeout with increasing seconds like i*1000

Also, as others pointed out you can't call functions with params like that from setTimeout use anonymous function like

...
while (i<100) {
  setTimeout(
     function(i){
        myfunc03(i);
     }, i*1000);
   i++;
}
...

for that

edited Jun 9, 2016 at 14:42

answered Jun 9, 2016 at 14:06

Viral Shah

475 bronze badges

6 Comments

mplungjan Over a year ago

Please work on your answers. this is not readable nor understandable

Viral Shah Over a year ago

@mplungjan yeah my bad!

mplungjan Over a year ago

You did not address the closure issue

Viral Shah Over a year ago

I know, others already did that and originally I had missed it. So I just modified my original answer. Didn't feel right to copy off someone else's answer :)

Viral Shah Over a year ago

@mplungjan it's okay. I don't write stuff just for votes or reputation. Just killing some free time and helping fellow coders out :) Anyways corrected the answer as you insisted

|

Collectives™ on Stack Overflow

setTimeout() method inside a while loop [duplicate]

8 Answers 8

2 Comments

Example

A reusable function

Comments

Comments

Comments

Comments

2 Comments

Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Example

A reusable function

Comments

Comments

Comments

Comments

2 Comments

Comments

6 Comments

Linked

Related