Referencing variables in setTimeout function - Javascript Closures
Requirement
- Reference For loop variable i in setTimeout function
Wrong way
for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function() {
console.log(' i in timeout :: ' + i);
}, 2000);
}
Ouput
i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
Right way using Closures
for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function(j) {
return function() {
console.log(' j in timeout :: ' + j);
}
}(i), 2000);
}
Ouput
i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
j in timeout :: 1
j in timeout :: 2
j in timeout :: 3
j in timeout :: 4
j in timeout :: 5
j in timeout :: 6
j in timeout :: 7
j in timeout :: 8
j in timeout :: 9
j in timeout :: 10
References:
Categories :
JavaScript