2017-11-08 6 views
-1

動作しない私のコードです:てclearTimeoutはここproberly

var timeout = 0; 

function start() { 
    for (var i = 0; i < 1000; i += 50) { 
     timeout = setTimeout(function() { 
      aRandomNumber1 = random(); 
      aRandomNumber2 = random(); 
      aRandomNumber3 = random(); 

      document.getElementById('field1').innerHTML = '<img src="' + img[aRandomNumber1] + '" alt="Bild1">'; 
      document.getElementById('field2').innerHTML = '<img src="' + img[aRandomNumber2] + '" alt="Bild2">'; 
      document.getElementById('field3').innerHTML = '<img src="' + img[aRandomNumber3] + '" alt="Bild3">'; 
     }, i); 
    } 

    clearTimeout(timeout); 
    timeout = 0; 

画像はこの時点で停止されていません。次のステップで変更する必要があります。

+2

あなたはので、あなたてclearTimeoutにしか停止しようとし、各反復でタイムアウトを上書きしている非常に最後の1 –

+0

何を正確にあなたが達成したいですか?あなたは1000番目のタイムアウトをクリアしているに過ぎず、残りの部分は正常に動作します。 – Piyin

+0

最後のタイムアウト後、divのイメージを変更したいと思います。 –

答えて

0

、この行を述べている:

 timeout = setTimeout(function() { 

は単にそれの新しいインスタンスを作成していない、タイムアウトと呼ばれる変数を再作成しています。あなたができるときは、タイムアウトをオブジェクトにします。オブジェクトは、より多くのインスタンスを作成するための「テンプレート」として機能する関数なので、実際には1,000種類の異なるsetTimeout関数があります。

var timeout = 0; 
//Store all created functions 
var functions = []; 

function start() { 
    //Create 1000 objects and store them in the array 
    for (var i = 0; i < 1000; i++) { 
     functions.push(new Timeout()); 
    } 

    function Timeout() { 
     this.timeout = setTimeout(function() { 
      aRandomNumber1 = random(); 
      aRandomNumber2 = random(); 
      aRandomNumber3 = random(); 

      document.getElementById('field1').innerHTML = '<img src="' + img[aRandomNumber1] + '" alt="Bild1">'; 
      document.getElementById('field2').innerHTML = '<img src="' + img[aRandomNumber2] + '" alt="Bild2">'; 
      document.getElementById('field3').innerHTML = '<img src="' + img[aRandomNumber3] + '" alt="Bild3">'; 
      }, i); 
     } 
    } 

for (var i = 0; i < functions.length; i++) { 
    functions[i].clearInterval(functions[i].timeout); 
} 

timeout = 0; 
0

最後のタイムアウトの参照のみが保存されているので、それぞれの繰り返しでtimeoutへの参照を上書きしています。タイムアウトへの参照をすべて配列に保存しようとすることができます。 timeoutsを呼び出し、そのループの後に配列を呼び出し、呼び出された各タイムアウトをクリアします。他の人のよう

var timeouts = []; 

function start() { 
    for (var i = 0; i < 1000; i += 50) { 
     var timeout = setTimeout(function() { 
      aRandomNumber1 = random(); 
      aRandomNumber2 = random(); 
      aRandomNumber3 = random(); 

      document.getElementById('field1').innerHTML = '<img src="' + img[aRandomNumber1] + '" alt="Bild1">'; 
      document.getElementById('field2').innerHTML = '<img src="' + img[aRandomNumber2] + '" alt="Bild2">'; 
      document.getElementById('field3').innerHTML = '<img src="' + img[aRandomNumber3] + '" alt="Bild3">'; 
     }, i); 
     timeouts.push(timeout); 
    } 
function clearTimeouts(){ 
    timeouts.forEach(timeout =>{ clearTimeout(timeout);}); 
    timeouts = []; 
} 
// stopping all timeouts after 1000 ms 
setTimeout(clearTimeouts, 1000); 
+0

ありがとうございますが、今、画像はもう変化しません –

+0

どういう意味ですか?すべてのタイムアウトを停止すると、何も変更されなくなります。このコードを使用すると、すぐにすべてを停止するので、しばらくしてからイメージを変更した後に 'clearTimeout'を呼び出す必要がある場合は、更新された答えを参照してください –

関連する問題