4

このコードを実行してみたら、不思議な結果がでました

function printFive() {
    for (var i = 0; i < 5; i++) {
        setTimeout(function () {
            console.log(i);
        }, i * 1000);
    }
}

printFive();

こうすれば、

0
1
2
3
4

がゆっくり出力されると思うと、実際は

5
5
5
5
5

がでました。

jsfiddle

どうして0から4までループしているのに、5ばかりが出てくるんですか。どうすれば思い通りになりますか。

4 件の回答 4

5

See for文でclick時の動作を定義したい

これと同じ回答になります。
for 文内で即時関数を用いて値を束縛する必要があります。 詳しくはこちらをご覧ください。

http://mattn.kaoriya.net/software/lang/javascript/20110523124612.htm

1
  • 似た質問がもう投稿されていましたね。気が付きませんでした。
    – JLRishe
    Commented 2014年12月19日 14:04
4

その様な場合は with({i:i}) などとして i の値を束縛するのがお手軽です:

function printFive() {
    for (var i = 0; i < 5; i++) with({i:i}) {
        setTimeout(function () {
            console.log(i);
        }, i * 1000);
    }
}

jsfiddle

説明:

(他の回答にもある様に) クロージャは (宣言された時の値をキャプチャするのではなく、) 変数 i の参照を保持します。従って、クロージャが生成された後に外側の i の中身が書き換われば、クロージャからも書き換わった値が見えます。更にいうならば、もしあるクロージャが変数 i を書き換えれば、別のクロージャからもその書き換わった値が見えます。

ここで with({i:i}) とすると、ループごとに {i:i} というオブジェクト (その時点での var i の値をメンバ i に持つオブジェクト) が生成されます。そして with(...) に指定することで、クロージャから見える i が、このループごとに生成されたオブジェクトのメンバ i に置き換わります。

(でも、この類の回答をしている人が他にいませんね…… この方法は私はたまに使うのですが、もしかして問題点でもあるのですかね……)

# 初投稿なのだが、こんな感じで投稿できるかな?

1
  • 2
    詳しい答えをありがとうございます! with非推薦で、ES5 Strictモードでは禁止されていますが、これは興味深いやり方ですね。
    – JLRishe
    Commented 2014年12月19日 18:47
3

以上の結果はクロージャによる動作です。

簡単にいうと、ある関数の実行中に出てくる変数はたとえその中の関数で使われても、結局はどこにあっても同じ変数です。

setTimeoutの中のisetTimeout外側の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();
1

ちょっと時間が経っていますが、js使うならやっぱり再帰はちゃんと使えた方がいいと思うので再帰を使ったサンプルコードを貼らせて貰います。
これなら同時に動いているsetTimeoutはある時点では一つしかないので止めたりするのも楽です。

<html>
<script>
(function printFive(loop, now){
  if(!now)now=0;
  if(loop<now) return true;
  setTimeout(function(){
    now++;
    console.log(now);
    this(loop, now);
  }.bind(printFive), 1000);
})(5)
</script>
</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。