Question

使用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，但图像仍然继续移动。

Answer 1

你可以像这样重构：

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);
}

Answer 2

“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（）”，这样你就可以在必要时访问先前声明的变量（对于范围sakes）

希望有所帮助，这显然不是测试人员。

Answer 3

你的代码破坏了我的浏览器，因为你的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函数运行然后停止使用循环

3 个答案: