我正在尝试创建一个简单的飙车动画。单击按钮后，汽车图像就会在页面上移动，直到每个图像到达特定位置。下面的代码适用于每次单击将汽车移动随机距离的单独单击，但我希望单击一次即可循环重复移动。我尝试将其放入 while 循环中引用 x 的值，但它不起作用。任何想法。
<html>
<head>
<meta charset="utf-8">
<title>Race Car</title>
</head>
<body>
<input type="button" id="move" value="race time" onClick="race()" />
<div id="car" style="position: absolute; top: 150px"><img src="car.png"></div>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
//Get car position coordinates
x = $("#car").offset().left;
y = $("#car").offset().top;
//Move car across screen by resetting car position coordinates
var race = function() {
var delay = 1000;
setTimeout(function() {
$("#car").css({
left: x += Math.floor(Math.random() * 50),
top: y
});
x = $("#car").offset().left;
}, delay);
};
</script>
</body>
</html>最佳答案
您正在寻找setInterval .
setTimeout 在 x 毫秒后运行您的函数一次。
setInterval 每 x 毫秒运行一次函数。
请务必将间隔存储在您可以访问的变量中 (var time = setInterval(fn, ms))，然后在您想要停止间隔时清除它 (clearInterval(计时器))。
关于javascript - 有延迟的循环代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48118038/