以上の結果はクロージャによる動作です。
簡単にいうと、ある関数の実行中に出てくる変数はたとえその中の関数で使われても、結局はどこにあっても同じ変数です。
setTimeout
の中のi
はsetTimeout
外側のi
と全く同じ変数です。だから、外側のi
の値が変われば、内側のi
の値も変わってきます。
setTimeout
に渡している関数はfor
ループが終わったあとに実行されます。実行されたら、その時点のi
の値が表示されます。for
ループが終わったら、i
の値は5
なので、5
が5回表示されます。
思い通りに0
,1
,2
,3
,4
を表示するには、いくつかの方法があります。
一つの方法は、別の関数を呼び出して、新しい変数を作ることです。
function printFive() {
for (var i = 0; i < 5; i++) {
setTimeout(makePrintFunction(i), i * 1000);
}
}
function makePrintFunction(value) {
return function () {
console.log(value);
}
}
printFive();
jsfiddle
makePrintValue
が呼び出される度に新しいvalue
という変数が生成され、その変数を使う関数が返されます。だから、i
の値が変わっても、そのvalue
の値は変わりません。
もひとつの方法はbind
を使うことです。
function printFive() {
for (var i = 0; i < 5; i++) {
setTimeout(printValue.bind(null, i), i * 1000);
}
}
function printValue(value) {
console.log(value);
}
printFive();
jsfiddle
bind
とは、関数を実行せずに前もって引数を渡して新しい関数を作り出すメソッドです。その時点で渡した値がキープされるので、i
の値が変わっても、すでに渡した値に影響はありません。
ちなみに、この場合はconsole.log
に直接bind()
を呼び出す方法もあります:
function printFive() {
for (var i = 0; i < 5; i++) {
setTimeout(console.log.bind(null, i), i * 1000);
}
}
printFive();