如何让setTimeout函数运行然后停止使用循环
[英]How to get the setTimeout function to run and then stop using a loop
问题描述
I am having trouble getting an image to stop moving while using setTimeout method. 
使用setTimeout方法时，我无法使图像停止移动。 I have an image that moves a random amount across a page and I want it to stop once it reaches the other image. 我有一幅图像在页面上随机移动，当它到达另一幅图像时我希望它停止。 I tried putting the setTimeout in a while loop, but I cannot get it to work. 我尝试将setTimeout放入while循环中，但无法正常工作。 Below is the code I have in an external javascript file, I invoke the moveCars() function in the HTML: 以下是我在外部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);
}
}
Without the while loop, the image moves across the page forever. 没有while循环，图像将永远在页面上移动。 But with the while loop in there, the setTimeout only runs once. 但是，在那里的while循环中，setTimeout只运行一次。
*Note: I also tried just setting a value instead of using finish.style.left in the loop, but the image still continued to move. *注意：我也尝试只设置一个值，而不是在循环中使用finish.style.left ，但是图像仍在继续移动。
3 个解决方案
解决方案1
0 2016-04-25 20:52:47
You can refactor like this: 您可以这样重构：
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
An "if" statement should be enough. 一个“ if”语句应该足够了。 setTimeout calls the same function over and over again. setTimeout一遍又一遍地调用相同的函数。 Here's a quick example of that 这是一个简单的例子
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);
}
}
I also set the animate timeout global so that you can cancel unncessary calls to "RaceCar1()". 我还设置了全局动画超时，以便您可以取消对“ RaceCar1（）”的不必要的调用。
Finally, I encapsulated "RaceCar1()" in an anonymous function so you get to access the previously declared variable if necessary (for scope sakes) 最后，我将“ RaceCar1（）”封装在一个匿名函数中，以便在必要时访问先前声明的变量（出于范围的考虑）
Hope that helped, this is obviously not tester. 希望有帮助，这显然不是测试人员。
解决方案3
0 已采纳 2016-04-25 20:55:40
Your code broke my browser, as it created an infinite loop of setTimeout calls due to your while clause. 您的代码破坏了我的浏览器，因为您的while子句创建了setTimeout调用的无限循环。 Change that to an if statement and it's fine. 将其更改为if语句就可以了。 You simply wish to re-call your animation routine provided your logic still applies, so you only require an if for that. 只要您的逻辑仍然适用，您只是希望重新调用动画例程，因此您只需要一个if。 A while loop will continuously place stack calls to your animation loop repeatedly. while循环将连续不断地重复向动画循环发出堆栈调用。
The following code works fine for me: 以下代码对我来说很好用：
<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>
If you can use requestAnimationFrame , use that instead. 如果可以使用requestAnimationFrame ，请改用它。 Would be much better. 会好得多。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.