如何讓setTimeout函數運行然后停止使用循環
[英]How to get the setTimeout function to run and then stop using a loop
問題描述
使用setTimeout方法時，我無法使圖像停止移動。 我有一幅圖像在頁面上隨機移動，當它到達另一幅圖像時我希望它停止。 我嘗試將setTimeout放入while循環中，但無法正常工作。 以下是我在外部javascript文件中擁有的代碼，我在HTML中調用moveCars（）函數：
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);
}
}
沒有while循環，圖像將永遠在頁面上移動。 但是，在那里的while循環中，setTimeout只運行一次。
*注意：我也嘗試只設置一個值，而不是在循環中使用finish.style.left ，但是圖像仍在繼續移動。
3 個解決方案
解決方案1
0 2016-04-25 20:52:47
您可以這樣重構：
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);
}
解決方案2
0 2016-04-25 20:54:46
一個“ if”語句應該足夠了。 setTimeout一遍又一遍地調用相同的函數。 這是一個簡單的例子
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（）”的不必要的調用。
最后，我將“ RaceCar1（）”封裝在一個匿名函數中，以便在必要時訪問先前聲明的變量（出於范圍的考慮）
希望有幫助，這顯然不是測試人員。
解決方案3
0 已采納 2016-04-25 20:55:40
您的代碼破壞了我的瀏覽器，因為您的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 ，請改用它。 會好得多。
如何在使用 setTimeout function 時停止循環
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.