JavaScript asynchroniczny callback i zakres

Question

Rozważmy następujący przykład:

var cb = function (t) { 
    console.log('callback -->' + t); 
}; 

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

Working example at jsfiddle

wyjściu tego fragmentu kodu jest:

0 
1 
2 
callback ---> 3 
callback ---> 3 
callback ---> 3 

wszystko działa zgodnie z oczekiwaniami, na pętli stawia 3 zwrotnego wywołuje pętlę zdarzeń. Pod koniec pętli for i == 3 i po wykonaniu wywołań wszystkie z nich wypisują 3, ponieważ zawierają łącze do i, które jest 3. W jaki sposób można poprawić ten fragment, więc gdy wywołanie zwrotne zostanie użyte, używa rzeczywistą wartość, która została mu przekazana.

Wyjście powinno być:

callback ---> 1 
callback ---> 2 
callback ---> 3 

góry dzięki.

Answer 1

Create a closure tak, że handler setTimeout będzie odnosić się do zmiennej zamknięcia na lokalnym (który w tym przypadku, również o nazwie i), a nie i z pętli:

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

Answer 2

Można spróbować .bind:

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

The demo.

Tradycyjny sposób obsłużyć to jest stworzenie Zamknięcie:

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

Answer 3

będę po prostu użyć setTimeout() w functoin Twojego CB

var cb = function (t) { 
    setTimeout(function(){ 
    console.log('callback -->' + t); 
    },1000); 
}; 


for(var i = 0; i<3; i++) { 
    console.log(i); 
     cb(i); 
} 

Answer 4

Częste pytanie. Spróbujmy wykorzystać niektóre cechy przyszłości JS. Mam na myśli let. Tworzy lokalną zmienną zasięgu i nie trzeba używać zamknięcia ani innej sztuczki. Ale teraz to działa tylko w FF (używam 20.0.1)

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