Define function based on global variable in javascript

Question

I'm trying to print out a number every 5 seconds:

for(i=0; i<10; i++) {
    setTimeout(function() {
        console.log(i)
    }, 5000 * i);
}

But instead I print 10 every 5 seconds because the loop finished and the global variable i is ten. Is there a way to avoid this happening?

Answer 1

You can use bind to create a closure:

for (i = 0; i < 10; i++) {
    setTimeout((function(num) {
        console.log(num);
    }).bind(this, i), 5000 * i);
}

Answer 2

If ES6 Is allowed you could use a let declaration.

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
      console.log(i)
  }, 5000 * i);
}

Answer 3

The setTimeout function in javascript doesn't work like time.sleep(n) in python. The code will not pause and continue to run after 5s. It will set the body of the function in a queue that will be served in the time you picked. Since you loop 10 times, it will set all of your orders which are basically print i in a queue and serve them all together. To avoid this you can make a use of your loop in something that looks quite like this

setTimeout(function(){ console.log(i)}, 5000*i);

which will schedule each if the print 5s away from the last one !