jQuery - forループのタイムアウト

Question

配列の項目をループするためにjQueryを少し書いて、乱数を表示してから別の番号を表示します。問題は、ループ内に遅延を入れて、2秒間の数値を表示してから次の数値に移動することです。 2秒間保持した乱数を見てから次の乱数に移ります。私はループ内にタイムアウトを入れようとしましたが、うまくいきませんでした。どんな助けも素晴らしいことになります。

function RandomNumberGenerator(){ 

    var myArray = new Array(99); 

     for (var i=0; i< 99; i++) { 
      myArray[i] = Math.floor(Math.random()*100) 
      myArrayTwo[i] = Math.floor(Math.random()*100) 
     } 

     for (var i=0; i< 9; i++) { 
      $('li.num').text(function(index) { 

      // timeout needs to be here somewhere 

      return (myArray[i]); 

      }) 
     } 
}); 
} 

Answer 1

まず。この関数はまた、RandomNumberGenerator内のローカル変数とすることができる：

var displayNumber = function() { 
     $('li.num').text(myArray[i++]); 
     if (i < 100) { 
      setTimeout(displayNumber, 2000); 
     } 
    }; 

上記機能は、li.numに数値を入れインクリメントi、2秒で（setTimeoutを使用して）再度関数を呼び出すためにブラウザに指示 - だけ私たちが100未満の数字を表示した場合。

この関数（displayNumber）が最初に呼び出されると、1つの数値が表示され、2秒後に再度呼び出されるように設定されます（その他の数値を表示するなど）。すでに100の数字が表示されている場合は、再度コールを設定しないので、その時点で繰り返しが停止します。

だから、今行うことができます。

var myArray = new Array(99); 
    for (var i=0; i< 99; i++) { 
     myArray[i] = Math.floor(Math.random()*100); 
    } 

    var i = 0; 
    var displayNumber = function() { 
     $('#foo').text(myArray[i++]); 
     if (i < 10) { 
      setTimeout(displayNumber, 2000); 
     } 
    }; 

    displayNumber(); // to get the ball rolling 

Answer 2

あなたが本当にその後、数を更新し、繰り返します別タイムアウトを開始し、あなたはタイムアウトの終わりに数を更新する、「ループ内で」タイムアウトをしたくありません、あなたの終わりの条件が満たされるまで。

Answer 3

機能のコードの遅延が機能しません。コードが実行されている限り、ブラウザは更新を表示しないので、変更が表示される前に関数を終了する必要があります。

したがって、setTimeoutまたはsetIntervalを使用して作業を分割する必要があります。このような

何か：あなたは、独自の関数の内部（乱数を表示し、それが継続するかどうかを決定する）作業を行うコードを配置する必要があり、すべての

function RandomNumberGenerator(){ 

    var myArray = new Array(99); 

    for (var i = 0; i < 99; i++) { 
    myArray[i] = Math.floor(Math.random()*100) 
    myArrayTwo[i] = Math.floor(Math.random()*100) 
    } 

    var index = 0; 
    var handle = window.setInterval(function() { 
    $('li.num').text(myArray[index]); 
    if (++index == 100) { 
     window.clearInterval(handle); 
    } 
    }, 2000); 
} 

Answer 4

ノートを、これが最もきれい/よりよい解決策はありませんが、誰もあなたが尋ね掲載しないため、ここではあなたのforループの遅延の実装だということ：

var delay = 2000; //2 seconds 
for (var i=0; i< 9; i++) { 
    setTimeout(function(index){ 
     $('li.num').text(myArray[index]); 
    },delay * i,i); 

Answer 5

これは私が（代わりにsetIntervalのsetTimeoutを使用して）このために使用する構文のかなり簡潔なタイプです。

var $li = $('li.num'); // Set a local variable for efficiency 

var tloop = function(iter, num_of_iters, delay, $li){ 
    setTimeout(function(){ 
     $li.text(Math.floor(Math.random()*100)); 
     if (iter < (num_of_iters - 1)) tloop(iter+1, num_of_iters, delay, $li); 
    }, delay); 
}; 

tloop(0, 10, 2000, $li); // Kick off the display