我正在尝试使JavaScript函数每50ms每50ms运行一次，但它不起作用
我的目标是模拟两个骰子的卷，并选择“动画”卷或仅显示结果。为此，我将使用以下脚本使用
<script>
function roll_dice() {
let _die1 = Math.floor(Math.random() * 6) + 1;
let _die2 = Math.floor(Math.random() * 6) + 1;
let die1_img = `images/${_die1}.png`
let die2_img = `images/${_die2}.png`
document.getElementById("die1").setAttribute("src", die1_img);
document.getElementById("die2").setAttribute("src", die2_img);
}
function animate_dice() {
let myInterval = setInterval(roll_dice, 50);
setTimeout(clearInterval(myInterval),2000);
}
function roll_or_animate() {
if (document.getElementById("should_be_animated").checked == true) {
animate_dice();
} else {
roll_dice();
}
}
</script>
一个按钮，该按钮可以调用roll_or_animate（）。
当不选中应该_be_animated 时，没有问题，但是当检查它时，骰子只是保持静止而不是按预期的2s“滚动”每50ms每50ms“滚动”。但是，如果发表
setTimeout(clearInterval(myInterval),2000);
了评论，则骰子每50ms每50ms“滚动”，尽管不停止。
我在做什么错？我认为Settimeout会等待2s，然后再执行Clear Interval，从而停止滚动动画。
My goal is to simulate the roll of two dice, with an option to "animate" the roll or merely show the result. For this, I'm using the following script
<script>
function roll_dice() {
let _die1 = Math.floor(Math.random() * 6) + 1;
let _die2 = Math.floor(Math.random() * 6) + 1;
let die1_img = `images/${_die1}.png`
let die2_img = `images/${_die2}.png`
document.getElementById("die1").setAttribute("src", die1_img);
document.getElementById("die2").setAttribute("src", die2_img);
}
function animate_dice() {
let myInterval = setInterval(roll_dice, 50);
setTimeout(clearInterval(myInterval),2000);
}
function roll_or_animate() {
if (document.getElementById("should_be_animated").checked == true) {
animate_dice();
} else {
roll_dice();
}
}
</script>
with a button that calls roll_or_animate().
There is no issue when should_be_animated is unchecked, but when it is checked, the dice merely stay still rather than "rolling" every 50ms for 2s as intended. But if the line
setTimeout(clearInterval(myInterval),2000);
is commented out, then the dice do "roll" every 50ms, albeit without stopping.
What am I doing wrong? I thought that setTimeout would wait 2s before executing clearInterval, thus stopping the rolling animation.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用此行：
clearInterval（myinterval）部分正在立即执行，而从该调用中的返回值是在计时器的2000毫秒延迟命中后将执行的。此函数调用的返回值不是
settimeout（）需要的第一个参数。它需要功能参考。因此，要进行电话等待计时器的时间，您需要将该调用包装在函数参考中。With this line:
The
clearInterval(myInterval)portion is executing immediately and whatever the return value from that call is is what will be executed after the timer's 2000 ms delay is hit.The return value from this function call is not what the first argument of
setTimeout()requires. It requires a function reference. So to make that call wait for the timer's time, you need to wrap that call in a function reference.您需要将回调函数作为第一个参数传递：
You need to pass a callback function as the first parameter: