4

私は期待どおりに動作するこのJavascriptコードを持っています:

<div class="test"></div>

<script>
setTimeout(function(){$(".test").append("test1")},1000);
setTimeout(function(){$(".test").append("test2")},2000);
</script>
<script src="js/jquery.min.js"></script>

最初に「test1」が表示され、次に「test2」が表示されます。「test1test2」というように、これが必要です。

これを FOR ループで実行しようとすると、次のようになります。

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++ ) {
    setTimeout(function(){$(".test").append("test" + i)},timeInterval);
    timeInterval += 1000;
}

次に、最初に「test2」を取得し、次に「test2」を取得します。「test2test2」というように、これは私が望むものではありません。

実際、l = 3 の場合、「test1test2test3」ではなく「test3test3test3」が返されます。この問題を解決する方法を知っている人はいますか？

4

5 に答える 5

5

が関数を実行しているときにvariが 2 にインクリメントされるため、値が 2 として出力され、結果として.setTimeoutitest2test2

のインスタンスを使用するには、クロージャを使用する必要がiありますtest1test。

デモ: http://jsfiddle.net/mBBJn/1/

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++) {
    (function(i) {
        setTimeout(function() {
            $(".test").append("test" + (i+1))
        }, timeInterval);
        timeInterval += 1000;
    })(i);
}

編集：関数の引数を使用しました。

于 2012-10-25T21:52:02.957 に答える
3

for ループは新しいスコープを作成しません。別の関数を使用してそれを行うことができます。

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++) {
    setTimeout((function(i) {
        return function() {
            $(".test").append("test" + i);
        }
    })(i), timeInterval);
    timeInterval += 1000;
}
于 2012-10-25T21:50:47.903 に答える
2

この状況では、変数iは常に(呼び出されたときiの の値ではなく) の現在の値を参照します。i

これが、JavaScript でスコープが機能する方法です。

解決策については、@Esailja の回答を参照してください。

于 2012-10-25T21:51:01.447 に答える
0

スコープを維持する最も明白な方法iは他の回答で解決されますが、jQuery を使用しているため、他のオプションがあります。

  1. ループ$.eachの代わりに使用すると、そのスコープ内のどこにでも変数にアクセスできます。fori

  2. delayの代わりに使用しsetTimeoutます。これを機能させるには、最初にキューをトリガーする必要があります。$(".test").show(0).delay(timeInterval).append("test" + i)

于 2012-10-25T22:14:14.860 に答える
0

これはi、for ループから の値を取得していないためです。これを機能させるためにコードを微調整できます。

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++ ) {
    (function(i2, timeInterval2) {
        setTimeout(function() {
            $(".test").append("test" + i2);
        }, timeInterval2);
    })(i, timeInterval);
    timeInterval += 1000;
}
于 2012-10-25T21:51:54.800 に答える