为javascript循环执行实现暂停和恢复机制

Implementing a pause and resume mechanism for javascript loop execution

本文关键字：恢复 机制 暂停 实现 javascript 循环 执行      更新时间：2023-09-26

我正在尝试为递归调用的循环提供暂停和恢复功能。我正在使用"setTimeout"answers"clearTimeout"函数。。。

当用户单击"暂停"按钮时，计时器将设置为无限长时间（尽可能长）。当用户点击"恢复"按钮时，超时应该通过"clearTimeout"调用来清除。但超时永远不会被清除。我犯了什么错？

提前谢谢。。

JFIDDLE演示

HTML:

<button id="loop_controler">pause</button>

JS:

var array = [1,2,3,4,5,6,7];
var pause = false;
var timer;
function execute(array,i){
    var pauseTime = 0;
    if (pause){
        pauseTime = 2147483647;  //max value for timeout     
    }
    timer = setTimeout(function(){        //set timer
           setTimeout(function () {       
               alert(array[i]);           //this timeout gives a constant delay
               if (array.length > i)      //(just to give enough time to users to click button)
                   execute(array,i+1);
           }, 1000);
    }, pauseTime);
    console.log('set ' + timer);
}
$('document').ready(function(){
    $('#loop_controler').click(function(){
        if ($(this).text() == 'pause'){
          pause = true;
          $(this).text('resume');
        } else {
          clearTimeout(timer);           //clear timer
          console.log('clear ' + timer);
          pause = false;
          $(this).text('pause');
        }
    });
    execute(array,0);
});

早在2012年，我就用JavaScript编写了一段用于增量计时的代码片段，该代码使用setTimeout，并具有start和stop函数：https://gist.github.com/aaditmshah/2056987

查看演示：

var button = document.querySelector("button");
var div = document.querySelector("div");
var running = false;
var number = 1;
var timer = new DeltaTimer(function () {
  div.innerHTML = number++;
}, 1000);
button.addEventListener("click", function () {
  if (running) {
    timer.stop();
    button.innerHTML = "Start";
    running = false;
  } else {
    timer.start();
    button.innerHTML = "Stop";
    running = true;
  }
});
function DeltaTimer(render, interval) {
    var timeout;
    var lastTime;
    this.start = start;
    this.stop = stop;
    function start() {
        timeout = setTimeout(loop, 0);
        lastTime = Date.now();
        return lastTime;
    }
    function stop() {
        clearTimeout(timeout);
        return lastTime;
    }
    function loop() {
        var thisTime = Date.now();
        var deltaTime = thisTime - lastTime;
        var delay = Math.max(interval - deltaTime, 0);
        timeout = setTimeout(loop, delay);
        lastTime = thisTime + delay;
        render(thisTime);
    }
}
<button>Start</button>
<div></div>

希望能有所帮助。

我误解了clearTimeout函数。我认为回调（setTimeout（…）中的calback）会在调用clearTimeout之后立即执行。但在调用clearTimeout后，回调不会执行。。。

工作JS代码是，

var array = [1,2,3,4,5,6,7];
var timer;
var i=0;
function execute(){
     timer = setTimeout(function () {
               alert(array[i]);
               i++;
               if (array.length > i){
                   execute();
               }
           }, 1000);
}
$('document').ready(function(){
    $('#loop_controler').click(function(){
        if ($(this).text() == 'pause'){
          clearTimeout(timer);
          $(this).text('resume');
        } else {
          execute();
          $(this).text('pause');
        }
    });
    execute(array,0);
});
相关文章：