javascript - setTimeout とそれぞれの配列

Question

setTimeout と each イテレータの使用に混乱しています。5 秒の遅延後にコンソールが各名前を出力するように、次のように書き直すにはどうすればよいですか? 現在、以下のコードは 5 秒後に一度にすべての名前を出力します。私はしたいと思います：

1) 5 秒待ってから kevin を出力する
2) 5 秒待ってから mike を出力する
3) 5 秒待ってから sally を出力する

var ary = ['kevin', 'mike', 'sally'];

_(ary).each(function(person){

  setTimeout(function(){
    console.log(person);
  }, 5000);    

});

score 16 · Accepted Answer

offset次のように、配列内の各人に対してタイマーをさらに 5 秒待機させるという変数を作成できます。

var ary = ['kevin', 'mike', 'sally'];

var offset = 0;
_(ary).each(function(person){

  setTimeout(function(){
    console.log(person);
  }, 5000 + offset);    
 offset += 5000;
});

score 7 · Accepted Answer

あなたができる

var ary = ['kevin', 'mike', 'sally'];

_(ary).each(function(person, index){

  setTimeout(function(){
    console.log(person);
  }, index * 5000);    
});

値を増やさずにtimeout、すべてsetTimeoutsをまったく同じ値で初期化します (これが、表示される内容が表示される理由です)。

score 1 · Accepted Answer

each通常、すぐに起こることには適しています。

代わりに、配列を変更しても構わない場合は、配列をキューとして使用できます。

var ary = ['kevin', 'mike', 'sally'];

setTimeout(function loop() {
    console.log(ary.shift());

    if (ary.length)
        setTimeout(loop, 5000);
}, 5000);

loopキューに何も残らなくなるまで、5 秒間呼び出し続けます。

score 0 · Accepted Answer

array.forEach はコールバック関数を受け入れます。これは、新しい関数スコープが既に作成されていることを意味します。 setTimeout の性質は非ブロッキングであり、すぐに戻るため、反復ごとにコールバック関数の実行の遅延を増やすだけで済みます。

var ary = ['kevin', 'mike', 'sally'];

ary.forEach(function(person, index){
    setTimeout(function(){
        console.log(person);
    }, 5000 * (index + 1));   
})

forループで同じことを達成したい場合は、IIFEまたはletキーワードを利用できます

IIFE の例:

var ary = ['kevin', 'mike', 'sally'];

for(var i = 1; i <= ary.length; i++){
    (function(i){
        setTimeout(function(){
            console.log(ary[i - 1]);
        }, 5000 * i); 
    })(i)
}

let キーワードの例: [ECMAScript 6]

var ary = ['kevin', 'mike', 'sally'];

for(let i = 1; i <= ary.length; i++){
    setTimeout(function(){
        console.log(ary[i - 1]);
      }, 5000 * i); 
}

score -1 · Accepted Answer

シンプルな 1 ずつ増加するカウンターでsetInterval()を使用できます。

var ary = ['kevin', 'mike', 'sally'];

var i=0;
setInterval(function(){
    console.log(ary[i]);
    i++;
}, 5000);

ただし、i が 2 より大きくなると、エラーが発生し始めることに注意してください。そこにはある種の検証が必要であり、間隔をクリアしていることを確認してください。

javascript - setTimeout とそれぞれの配列

7 に答える 7

Related

Reference