1

JavaScript に 2 つの配列があるとします。

var content = ["string1", "string2", "string3", "string4"],
    milliseconds = [500, 1500, 1000, 500];

配列の各要素を、500 ミリ秒後、( の表示から) 1500ミリ秒後に表示されるように、配列contentから間隔を空けて 1 つずつコンソールに表示するようにします。millisecondsstring1string2string1

私は完全な初心者です。次のようなものを試しました。

for (var i = 0; i < content.length - 1; i++) {
    setTimeout(function() {
        console.log(content[i]);
    }, milliseconds[i]);
};

setTimeoutしかし、最後の文字列だけが 4 回表示され、メソッドが順番にではなく、すべて同時に開始されているように見えます。私が望む効果を得る方法はありますか？

4

2 に答える 2

0

まず第一に、setTimeoutあなたがそれらを同時に呼んでいるので、すべてが同時に開始しているように見えます。JavaScriptはブロックしません-setTimeoutコールバックが実際に起動するのを待たず、ただ続行します。そのため、ループを使用していたため、すべてのコールバックが多かれ少なかれ一度にスケジュールされていました。

すべてのがconsole.log同じものを印刷しているように見えるという2番目の問題は、同じループの問題が原因です。コールバックが完了する前にループが終了するため、の値はiループの最後のインデックスに設定されます。次に、コールバックが発生したときに、何iが等しいかを推測しますか？

1つの手法は、現在のアイテムの実行中のインデックスを保持することです。

// Don't pollute the global namespace
(function() {
    // Keep the index around
    var i = 0;

    // Setup the callback
    var callback = function() {
        console.log(content[i]);

        // Stop whenever there's nothing left to log
        if (i < content.length) {
            // Chain the next timeout, using the next string,
            // with the next wait period, using the callback
            i += 1;
            setTimeout(callback, milliseconds[i]);
        }
    };

    // Start the first setTimeout
    setTimeout(callback, milliseconds[i]);
})();
于 2012-06-29T20:53:42.063 に答える
0

毎回ログに記録される 4 番目の文字列についてはわかりませんが、残念ながら私の電話では実行できませんが、4 つのタイムアウトすべてが同時に開始される理由は正確にわかります。それは、それらがすべて同時に作成されているためです。それらを次々に開始したい場合は、それぞれが次のタイムアウトを開始するようにする必要があります。

于 2012-06-29T20:47:43.707 に答える