setTimeout関数を実行してループを使用して終了する方法

setTimeoutメソッドの使用中にイメージの移動を停止するのに問題があります。私はページの向こう側にランダムな量を移動するイメージを持っていて、それが他のイメージに達すると停止するようにします。 setTimeoutをwhileループに入れてみましたが、動作させることができません。永遠に、whileループせずにページ全体の画像が移動しsetTimeout関数を実行してループを使用して終了する方法

function moveCars() { 
    RaceCar1(); 
} 

function RaceCar1() { 
    var finish = document.getElementById('finish'); 
    var animate; 
    var moveCar1 = Math.floor((Math.random() * 100) + 1); 
    var car1 = document.getElementById('car1'); 
    car1.style.left = parseInt(car1.style.left) + moveCar1 + 'px'; 
    while(parseInt(car1.style.left) <= parseInt(finish.style.left)) { 
    animate = setTimeout(RaceCar1, 500); 
    } 
}

：以下は、私は外部のJavaScriptファイルを持っているコードがある、私はHTMLでmoveCars（）関数を呼び出します。しかし、そこのwhileループでは、setTimeoutは一度だけ実行されます。

*注：ループ内でfinish.style.leftを使用する代わりに値を設定するだけで、イメージは引き続き移動しました。

出典

2016-04-25 AJC

なぜ 'setInterval'と' clearInterval'を使用しないのですか（後者は、停止させたいイベントで呼び出されるべきです）？ – YakovL

'animate = setInterval（RaceCar1,500）'を使用し、必要に応じて 'clearInterval（animate）;を使用するか、擬似再帰的' setTimeout（） '呼び出しの使用を主張する場合は条件付き' return'あなたのRaceCar1関数の 'animate = setTimeout（RaceCar1、500）;'行前 – Redu

setTimeoutは非同期であることに注意してください。これはwhileループで作業したい。 –

while節のためにsetTimeout呼び出しの無限ループが作成されたため、コードがブラウザを壊しました。それをifステートメントに変更しても問題ありません。ロジックがまだ適用されていればアニメーションルーチンを再呼び出しするだけでよいので、ifを必要とするだけです。 Whileループは、アニメーションループにスタック呼び出しを繰り返し配置します。

次のコードは、私のために正常に動作します：

<script> 
function moveCars() { 
    RaceCar1(); 
} 

function RaceCar1() { 
    var car1 = document.getElementById('car1'); 
    var finish = document.getElementById('finish'); 
    var animate; 
    var moveCar1 = Math.floor((Math.random() * 100) + 1); 
    car1.style.left = parseInt(car1.style.left) + moveCar1 + 'px'; 
    if (parseInt(car1.style.left) <= parseInt(finish.style.left)) { 
     animate = setTimeout(RaceCar1, 500); 
    } 
} 
</script> 
<body onload="moveCars();"> 
    <p id="car1" style="position:absolute;left:0px;">Test</p> 
    <p id="finish" style="position:absolute;left:600px;">Finish</p> 
</body>

あなたがrequestAnimationFrame、使用を代わりに使用することができます。はるかに良いだろう。

出典

2016-04-25 20:55:40 ManoDestra

while文を繰り返し使用したいので、私はwhile文を使用していました。しかし、if文が私のために働いた。ありがとうございました！ – AJC

うん、もしあなたがループすることを確認してください。 setTimeoutを呼び出すと、呼び出す関数の別のループ反復を要求しています。したがって、if文のロジックが失敗するまでループし続けます。お役に立てて嬉しいです：） – ManoDestra

あなたはこのようにリファクタリングすることができます：文が十分でなければなりません "場合"

function moveCars() { 
    RaceCar1(); 
} 

function RaceCar1() { 
    var finish = document.getElementById('finish'); 
    var animate; 
    var moveCar1 = Math.floor((Math.random() * 100) + 1); 
    var car1 = document.getElementById('car1'); 
    car1.style.left = parseInt(car1.style.left) + moveCar1 + 'px'; 
    setTimeout(function(){ 
     if(parseInt(car1.style.left) <= parseInt(finish.style.left)) { 
      RaceCar1(); 
     } 
    }, 500); 
}

出典

2016-04-25 20:52:47

アン。 setTimeoutは同じ関数を何度も何度も呼び出す。ここでは、unncessary呼び出しを取り消すことができるように、私はまたに「RaceCar1（）」グローバルアニメイトタイムアウトを設定すること

var animate; 
function RaceCar1() { 
    var finish = document.getElementById('finish'); 
    var moveCar1 = Math.floor((Math.random() * 100) + 1); 
    var car1 = document.getElementById('car1'); 
    car1.style.left = parseInt(car1.style.left) + moveCar1 + 'px'; 
    if (parseInt(car1.style.left) <= parseInt(finish.style.left)) { 
     // OPrevent possible errors... 
     if (animate) { 
      clearTimeout(animate); 
     } 
     animate = setTimeout(function() { RaceCar1(); }, 500); 
    } 
}

の簡単な例です。

最後に、私はカプセル化された「RaceCar1は（）」あなたが必要（スコープがたのため）場合は助け

希望を事前に宣言した変数にアクセスするために得るように、無名関数で、これは明らかに、テスタではありません。

出典

2016-04-25 20:54:46 Bene

setTimeout関数を実行してループを使用して終了する方法

答えて

関連する問題