Javascript js：如何在1秒后停止循环？

我试着写一个函数来晃动/轻推弹出窗口

this.nudge = function() {
    var stopped = false;
    var x=10;
    setTimeout(function() {
        stopped = true;
    },1000);

    for (i=0;;i++){
        if (stopped) break;
        window.moveBy(0,x)
        window.moveBy(x,0)
        window.moveBy(0,-x)
        window.moveBy(-x,0)
   }
}

---

问题是：它永远不会停止

由于JavaScript是单线程的（正如注释中提到的@Luaan），您的无限循环将无限运行，并防止任何超时或其他事件被执行。运行时甚至不会尝试抢占您的循环（在中间中断以运行其他代码），并等待直到您的主函数返回——这从来没有发生过。

在JS中不能使用忙等待或其他类似循环：它们阻止浏览器的UI响应，并将导致任何事件延迟到执行完成和脚本线程空闲时

要以事件友好的方式正确处理循环，可以将其设置为每次重复超时或间隔，如：

this.nudge = function() {
    var x = 10;
    var loop = setInterval(function() {
      window.moveBy(0,x)
      window.moveBy(x,0)
      window.moveBy(0,-x)
      window.moveBy(-x,0)
    }, 100);

    setTimeout(function() {
      clearInterval(loop);
    }, 1000);
}

---

这可以通过删除

stopped

变量简化代码，并在超时过期时简单地启动/清除延迟循环。您可以调整任一功能的计时，以更改动画速率和总持续时间。

您认为这种解决方案如何

var i=0；
（功能a（超时、启动时间）{
console.log（i++）；
如果（Date.now（）-startTime>timeout）返回；
setTimeout（函数（）{
/*窗口移动比（0，x）；
窗口移动比（x，0）；
窗口移动比（0，-x）；
移动窗口（-x，0）*/
a（超时，开始时间）；
}, 0);
})（1000，Date.now（））也许你需要这样的东西：

this.nudge = function() {
    var x=10;
    var ts = Date.now();
    while(Date.now()-ts<1000){
        window.moveBy(0,x)
        window.moveBy(x,0)
        window.moveBy(0,-x)
        window.moveBy(-x,0)
   }
}

this.nudge=function（）{
var x=10；
var ts=Date.now（）；
while（Date.now（）-ts当然-您从来没有给它机会执行
stopped=true
.Javascript（或者更准确地说，是
setTimeout
在浏览器中工作的方式）不是多线程的。你正在用循环阻塞主线程。这根本不是你在JS中编写效果的方式。你可以使用一个间隔，并在该间隔内“摇晃”弹出窗口。这样，你可以在删除间隔时停止摇晃。或者，不使用循环，将“摇晃”代码移动到自己的函数中设置并让该函数调用它自己直到停止=true。100ms是一个很好的间隔值。我建议使用16ms，因为这是60fps。如果要将动画与帧速率联系起来，
requestAnimationFrame
可能是最好的选择，尽管16ms（或32ms）间隔应该可以正常工作。