Javascript Promise Variable Scope in For Loop

Question

Newbie alert!

I'm trying to understand the variable scope for a promise inside a for loop.

Consider the following code:

function sleep(ms) {
  return new Promise(resolve =>
    setTimeout(resolve, ms)
  );
}

for (var i =0; i<4; i++){
  sleep(1000).then(() => console.log(i));
}

The promise is called 4 times at once and then responds with:

How can I keep reference to the i variable? In order to get

Or whatever execution order actually took place.

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — ASDFGerte, Mar 14 '18 at 17:04
The easiest solution is to replace `var` with `let`, but you should read up on why. — ASDFGerte, Mar 14 '18 at 17:05
wow... Thanks... that did the trick. On my way to understand the differences. — Ben Quan, Mar 14 '18 at 17:11
Using let does cause the console to print the correct value but it does not give, what I expect to be, the intended performance: printing the value 1 second apart in incrementing values. — Thatalent, Mar 14 '18 at 17:29
Simultaneous execution is fine... All I needed is the reference on what just got processed. — Ben Quan, Mar 14 '18 at 18:54

score 1 · Answer 1 · answered Mar 14 '18 at 17:14

You can pass the i into the sleep function and resolve it.

 function sleep(i, ms) {
   return new Promise(resolve =>
     setTimeout(() => {
       return resolve(i);
     }, ms);
   );
 }

 for (var i = 0; i < 4; i++){
   sleep(i, 1000).then((data) => console.log(data));
 }

Thatalent · Answer 2 · 2018-03-14T17:25:12.683

Your problem is just how you're calling your sleep function. You must use the await keyword inside of an async labeled function.

This should be how your code looks:

function sleep(ms) {
  return new Promise(resolve =>
    setTimeout(resolve, ms)
  );
}

async function printSleep(){
for (var i =0; i<4; i++){
  await sleep(1000).then(() => console.log(i));
}
}

printSleep();

The key part you're missing is that you must use await to actually have your code wait for the sleep function to finish. If you don't it will queue the function and continuing executing the rest of the function in a synchronous fashion, causing your then statement to execute after the for loop has finished.

score 0 · Answer 3 · answered Mar 14 '18 at 19:22

As pointed out by ASDFGerte, by changing var to let, the i variable is kept within the block and outputs the desired reference.

function sleep(ms) {
  return new Promise(resolve =>
    setTimeout(resolve, ms)
  );
}

for (let i=0; i<4; i++){
  sleep(1000).then(() => console.log(i));
}

Javascript Promise Variable Scope in For Loop

3 Answers3