按下键时如何暂停/播放Javascript循环？答案

【问题标题】：How to pause/play a Javascript loop when a key is pressed?按下键时如何暂停/播放Javascript循环？
【发布时间】：2011-09-13 15:51:13
【问题描述】：

使用 Javascript/jQuery，如何在按下“P”键时暂停（或恢复）以下loop？

(function() {
   var arr = [...],
       len = arr.length;


   (function doProcess(i) {
       if (i) {
            console.log(len - i);
           /* do something with arr[len - i] */
           setTimeout(function() { doProcess(--i); }, 20000);
       }
   })(len);    
})();

【问题讨论】：

标签： javascript jquery loops keyboard

【解决方案1】：

您需要跟踪您的计时器已经过去了多少时间（请参阅此处：javascript: pause setTimeout();）并在您想要停止的任何事件上调用 clearTimeout，然后再次调用 setTimeout 并在发生任何事件后剩余时间unpauses 被再次触发。

【讨论】：

【解决方案2】：

暂停和恢复相当复杂。你真正需要做的是：

启动进程并存储其超时 ID。
存储运行该进程的时间。
在按键时，使用超时 ID 清除超时。
将未完成的时间存储在另一个变量中。
在下一次按键时，使用未完成的时间设置超时。
将以下超时设置为原始预期延迟。

这里是a more generalized jsFiddle example 我发了。

var counterOn = true;
var delay = 3000; 
var lastRun;
var tempDelay;
var intervalId;

function decrementCounter() {
  // do something
  lastRun = new Date();
  timeoutId = setTimeout(decrementCounter, delay);
}

function toggleCounter() {
  var curTime = new Date();
  counterOn = !counterOn;
  if (counterOn) {
    lastRun = curTime.valueOf() + tempDelay - delay;
    timeoutId = setTimeout(decrementCounter, tempDelay);
  } else {
    clearTimeout(timeoutId);
    tempDelay = delay - (curTime.valueOf() - lastRun);
  }
}

$(document).keydown(function(e) {
  if (e.which === 80) {
    toggleCounter();
  }
});

decrementCounter();

【讨论】：