Javascript要素を表示中に配列をループする

Question

すべての配列要素を高速に表示しながら、関数が一定期間（例：3秒、5秒）配列を繰り返し処理する 'ランダムセレクタ'動作を作成したい反復が終了するまでの繰り返し。ラベルに表示されているすべての要素が順番に要素で停止するまで、次々と表示されるのを想像してみてください。

これまでの私のコード：

var places = ["Curry Leaf", "Subway", "Burger King"]; 

function execute_randomizer() { 
    var place_label = document.getElementById("place_label"); 
    for (var i = 0; i < 100; i++) { 
     var selected_place = places[Math.floor(Math.random() * places.length)]; 
     setTimeout(function() { 
      place_label.innerText = selected_place; 
     }, 400); 
    } 
} 

これはイテレーションを経て実行され、ループが行われているが、それは各反復の要素が表示されないときの要素を表示します。どうすればこれを修正できますか？

EDIT

期間はsetTimeout実行すると、その関数はsetTimeoutに渡す前に、反復

Answer 1

あなたfor仕上げを完了するまで、3つの要素があります場合でも、アニメーションは、配列を、反復処理を再度しなければなりません最後の値selected_placeを使用して100回実行されます。 setTimeout in for-loop does not print consecutive values

---

私はforループは約1ミリ秒で終了しますので、あなたのsetTimeoutは、400msの後にトリガすることです気づいたもう一つの問題でこの動作に関する

より、setTimeoutに渡された関数は、100をトリガします時間の間に何も遅れずに時間をずらしています。そのために、setTimeoutの遅延引数を400から400 * iに置き換えました。

---

var places = ["Curry Leaf", "Subway", "Burger King"];  
 
function execute_randomizer() { 
 
    var place_label = document.getElementById("place_label"); 
 
    for (var i = 0; i < 100; i++) { 
 
     var selected_place = places[Math.floor(Math.random() * places.length)]; 
 
     (function(selected_place){ 
 
      setTimeout(function() { 
 
       place_label.innerText = selected_place; 
 
      }, 400 * i); 
 
     })(selected_place); 
 
    } 
 
} 
 
execute_randomizer();

<span id="place_label"></span>

Answer 2

あなたは値を超える閉鎖し、各タイムアウトの異なる時間を使用することができます。最初の実行のために

var places = ["Curry Leaf", "Subway", "Burger King"]; 
 

 
function execute_randomizer() { 
 
    var place_label = document.getElementById("place_label"); 
 
    for (var i = 0; i < 10; i++) { 
 
     var selected_place = places[Math.floor(Math.random() * places.length)]; 
 
     setTimeout(function (value) { 
 
      return function() { 
 
       place_label.innerText = value; 
 
      }; 
 
     }(selected_place), i * 100); 
 
    } 
 
} 
 

 
execute_randomizer();

<div id="place_label"></div>

あなたは各要素を表示し、最後の値にランダムな要素を取ることができ、通過。

function execute_randomizer() { 
 
    function cb (value) { 
 
     return function() { 
 
      place_label.innerText = value; 
 
     }; 
 
    } 
 

 
    var place_label = document.getElementById("place_label"); 
 

 
    place_label.innerText = ''; 
 
    for (var i = 0; i < places.length; i++) { 
 
     setTimeout(cb(places[i]), 200 + i * 200); 
 
    } 
 
    setTimeout(cb(places[Math.floor(Math.random() * places.length)]), 200 + places.length * 200); 
 
} 
 

 
var places = ["Curry Leaf", "Subway", "Burger King"]; 
 

 
execute_randomizer();

<div id="place_label"></div>

Answer 3

今あなたが同じ時間に再び変更テキストの多分1ミリ秒と順100にループで100回を行くが、ので、あなたは、あなたのループを変更する必要があります。 タイムアウトを待ってから400 msを待ってから、次の反復を行います。 タイムアウトが非同期であることを覚えておいてください。

Answer 4

私はあなたがタイムアウトに全体の機能を置く方が良いかもしれないと思う。 （私は確信していないし、テストしていないが、それは私が試してみるものです）。

私が言っているのは、あなたのランダマイザーを作成し、あなたのフィールドに塗りつぶす関数を作成するということです。その後、同じ関数を再度呼び出すタイムアウトを設定し、パラメータとして渡すカウンタを保持します。

私は以下の何を意味するかの例：（それをテストしていない）

var places = ["Curry Leaf", "Subway", "Burger King"]; 

execute_randomizer(0); /* Start for the first time */ 

function execute_randomizer(times) { 
    if(times == 100) 
     return; /* stop execution */ 

    var place_label = document.getElementById("place_label"); 
    var selected_place = places[Math.floor(Math.random() * places.length)]; 
    place_label.innerText = selected_place; 
    setTimeout(function() { 
     execute_randomizer(times+1) 
    }, 400); 
}