如何让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.