Why does my value change before my setTimeout function is called in Javascript?

Question

Here is a minimal replicable code:

function print(num) {
   console.log(num)
}

...later in the code

var num = 5;
var count = 0;
while (num != 0) {
   setTimeout(function() {print(num);}, 1000 * count)
   num--;
   count++;
}

I want my output to be 5 4 3 2 1 but instead my output is 0 0 0 0 0

Why is this?

because you pass the result of `print()` to `setTimeout()` and not the function itself ... — Sirko, Sep 10 '16 at 14:20
By the time your timeout function is called in the event loop, the value of num has hit 0. The function always references the actual num variable, its value is not copied. — Joseph Young, Sep 10 '16 at 14:24

score 1 · Accepted Answer · answered Sep 10 '16 at 14:21

1

In this function call to setTimeout():

setTimeout(print(num), 1000 * count)

you're calling your print() function and passing its return value. If you want print() to be called when the timer expires, you have to pass a function to call it:

setTimeout(function() { print(num); }, 1000 * count)

answered Sep 10 '16 at 14:21

Pointy

405,095
59
585
614

Yeah I am doing this. Sorry, I just updated the question. – Jonathan Allen Grant Sep 10 '16 at 14:22

score 0 · Answer 2 · answered Sep 10 '16 at 14:26

You must pass in the value of num at the time through the setTimeout function, if you wish for the value at that point in time to be used

function print(num) {
   console.log(num)
}

var num = 5;
var count = 0;
while (num != 0) {
   setTimeout(print, 1000 * count, num);
   num--;
   count++;
}

Why does my value change before my setTimeout function is called in Javascript?

2 Answers2