I have an example on this code:
<script>
for(var i=1; i<3; i++){
setTimeout(function(){
say("HELLO NUMBER " + i);
}, i * 2000);
}
function say(text){
alert(text);
}
</script>
And output I need is :
alert("HELLO NUMBER 1");
alert("HELLO NUMBER 2");
But in this case, I still get output :
alert("HELLO NUMBER 3");
Anyone can help for this? thanks :)
Classic problem with closure
for(var i=1; i<=3; i++){
(function(num){
setTimeout(function(){
say("HELLO NUMBER " + num);
}, num * 2000);
})(i)
}
function say(text){
alert(text);
}
Demo: Fiddle
You are using a closure variable i inside the setTimeout callback, whose value is evaluated only when the callback is executed by then the value of i will be updated by the outside loop
Another way.
var out = [];
for(var i=0; i<3; ++i){
out.push(i+1);
setTimeout(function(){
say("HELLO NUMBER " + out.shift());
}, i * 2000);
}
function say(text){
alert(text);
}
you need a closure for the value of i for each iteration:
for (var i=1; i<3; i++) {
(function(j){
setTimeout(function() { alert("HELLO NUMBER " + j); }, j*2000);
})(i)
}
<script>
function doSetTimeout(i) {
setTimeout(function() { say("HELLO NUMBER " + i); }, 3000);
}
for(var i=1; i<3; i++){
doSetTimeout(i);
}
function say(text){
alert(text);
}
</script>
