如何在按下某个键时暂停/播放Javascript循环？

Question

使用Javascript/jQuery,当按下"P"键时,如何暂停(或恢复)以下循环？

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

Answer 1

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

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

这是一个更广泛的jsFiddle例子我掀起了.

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();