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

【问题标题】：Implementing a pause and resume mechanism for javascript loop execution为 javascript 循环执行实现暂停和恢复机制
【发布时间】：2014-11-02 06:38:07
【问题描述】：

我正在尝试通过递归调用为循环提供暂停和恢复功能。我正在为此使用“setTimeout”和“clearTimeout”函数......

当用户单击“暂停”按钮时，计时器将设置为无限时间（可能的最大值）。当用户单击“恢复”按钮时，应该通过“clearTimeout”调用清除超时。但是永远不会清除超时。我的错误是什么？

提前谢谢你..

JFIDDLE DEMO

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

【问题讨论】：

为什么不清除用户点击暂停时的超时时间，而不是设置超时时间为无穷大？然后在用户点击 resume 时再次启动。
主要问题是清除超时后，您并没有以正常超时重新启动它。
你需要i是一个全局变量，这样你就可以在数组中的当前位置重新启动定时器。
查看我今晚早些时候给出的类似答案：stackoverflow.com/questions/26695911/…
我误解了 clearTimeout 函数。我以为我们清除超时后会立即执行回调...非常感谢您的帮助..

标签： javascript

【解决方案1】：

早在 2012 年，我就用 JavaScript 为 delta timing 编写了一个 sn-p 代码，它使用 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>

希望对您有所帮助。

【讨论】：

【解决方案2】：

我误解了 clearTimeout 函数。我认为回调（setTimeout（...）中的回调）将在调用 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);
});

【讨论】：