Question

Using Javascript/jQuery, how can I pause (or resume) the following loop when the “P” key is pressed?

(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

Pausing and resuming is fairly complex. What you really have to do is this:

1. Start a process and store its timeout ID.
2. Store the time when you ran that process.
3. On keypress, clear the timeout using its timeout ID.
4. Store the unfinished time in another variable.
5. On next keypress, set the timeout using that unfinished time.
6. Set the following timeouts to the original intended delay.

Here’s a more generalized jsFiddle example I whipped up.

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