Zamknięcie Javascript "przechowuje" wartość w niewłaściwym czasie

Question

Próbuję stopniowo zwiększać licznik. Następujące prace:

function _award(points){  
    var step = 1; 
    while(points){ 
    var diff = Math.ceil(points/10); 
    setTimeout("_change_score_by("+diff+");" /* sigh */, 
       step * 25); 
    points -= diff; 
    step++; 
    } 
} 

Używa jednak niejawnego eval. Zło! Zamiast tego użyjmy zamknięcia, prawda?

function _award(points){  
    var step = 1; 
    while(points){ 
    var diff = Math.ceil(points/10); 
    setTimeout(function(){ _change_score_by(diff); }, 
       step * 25); 
    points -= diff; 
    step++; 
    } 
} 

Oczywiście to nie działa. Wszystkie utworzone zamknięcia wychwytują ostatnią wartość, jaką miał diff w funkcji - 1. Dlatego wszystkie anonimowe funkcje zwiększą licznik o 1, a na przykład _award(100) zwiększą wynik o 28 zamiast tego.

Jak zrobić to poprawnie?

Answer 1

Jest to znany problem. Ale można łatwo tworzyć zamknięcie na każdej iteracji pętli:

(function(current_diff) { 
    setTimeout(function() {_change_score_by(current_diff);}, 
       step * 25); 
})(diff); 

Answer 2

Nikita's approach prace, ale osobiście wolę zmieniając go tym bardziej jednoznaczny sposób (dzięki!):

function _schedule_score_change(diff, step){ 
    setTimeout(function(){ _change_score_by(diff) }, 
       step*25); 
} 

function _award(points){  
    var step = 1; 
    while(points){ 
    var diff = Math.ceil(points/10); 
    _schedule_score_change(diff, step); 
    points -= diff; 
    step++; 
    } 
} 

Answer 3

rozwiązując Zamknięcie pętli problem dostaje mniej niechlujny z Function#bind metody ECMAScript piąta edycja za:

setTimeout(_change_score_by.bind(window, diff), step*25); 

można hack this feature do przeglądarek, które nie obsługują go y et, aby uzyskać teraz korzyść.