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

发布于 2024-11-14 21:49:15 字数 477 浏览 1 评论 0原文

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情感失落者 2024-11-21 21:49:15

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

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

这是我编写的一个更通用的 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();

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

Start a process and store its timeout ID.
Store the time when you ran that process.
On keypress, clear the timeout using its timeout ID.
Store the unfinished time in another variable.
On next keypress, set the timeout using that unfinished time.
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();

回复收藏 0 原文