如何将递增的值传递给回调

Question

I'm iterating over an array, and for each element, doing something that invokes a callback. My problem is that within the callback, I need to know which pass of the iteration it's at.

Simplified, my code looks like this ...

for (var i=0; i<3; i++ {
  setTimeout(function () {
      console.log(i);
  },1000);
}

And I'm wanting to see

0
1
2

What I'm getting is

3
3
3

I understand why I'm getting 3's, but can't see how to get 0,1,2

NB. This is a simplified version of my problem. In myapp I'm actually calling a storage operation, so I can't simply provide "i" as an argument to the the callback function.

Answer 1

You need to capture the value at iteration time since JS has function scope so it's the same i that you reference.( and you don't want that. hence you need to create a closure.

for (var i = 0; i < 3; i++) {
    (function (a) {
        setTimeout(function () {
            console.log(a);
        }, 1000);
    })(i);
}

Answer 2

Why you are getting i as 3 is because settimeout is async, and both your forloop and set timeout function shares the same variable i . Which means your for loop runs completely before the callbacks are invoked where the i would have gone to 3 after all your iterations. So your work around is to create a local scope for the variable or in otherwords create a closure.

for (var i=0; i<3; i++) {
   (function(iter){ //Now with this you are creating a local closure for the variable iter and each setTimeout instance will no longer share the variable `i` instead it will use the variable created in its own scope defined by the anonymous function.
     setTimeout(function () {
         console.log(iter);
     },1000);
   })(i)
}