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

我正在尝试为递归调用提供暂停和恢复功能。我正在使用“setTimeout”和“clearTimeout”功能...为javascript循环执行实现暂停和恢复机制

当用户单击“暂停”按钮时，计时器被设置为无限时间（尽可能最大）。当用户点击“恢复”按钮时，超时应该通过“clearTimeout”呼叫清除。但超时从未被清除。我的错误是什么？

预先感谢您..

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

来源

2014-11-02 Sampath Liyanage

你为什么不清除超时，当用户点击暂停，而不是设置超时为无穷大？然后在用户点击简历时重新开始。 – Barmar 2014-11-02 06:44:14

主要问题是，在清除超时之后，您没有以正常超时重新启动它。 – Barmar 2014-11-02 06:45:00

您需要'i'作为全局变量，因此您可以在阵列中的当前位置重新启动计时器。 – Barmar 2014-11-02 06:46:09

我误解了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); 
});

来源

2014-11-02 08:05:30

早在2012我在JavaScript写的代码片段为delta timing ，它使用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>

希望有所帮助。

来源

2014-11-02 07:22:36

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

回答

相关问题