Question

我尝试编写一个摇动/轻推窗口弹出窗口的函数

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

问题是：它永远不会停止！

Answer 1

由于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变量来简化代码，并在超时到期时简单地启动/清除延迟循环。您可以调整任一功能的时间，以更改动画速率和总持续时间。

Answer 2

您对此类解决方案有何看法？

＆＃13;

var i = 0;
(function a(timeout, startTime) {
  console.log(i++);
  if (Date.now() - startTime > timeout) return;
  setTimeout(function() {
    /* window.moveBy(0, x);
    window.moveBy(x, 0);
    window.moveBy(0, -x);
    window.moveBy(-x, 0); */
    a(timeout, startTime);
  }, 0);
})(1000, Date.now());

＆＃13;

Answer 3

也许你需要一些谎言：

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

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

3 个答案: