0

我正在寻找一种通过单击事件（某种紧急按钮）来停止循环的方法。如果单击该按钮，它应该立即停止。

// 基本思想

$.each(someArray, function(index, value){
    setTimeout(function(){
          console.log(index);
     },5000*index);
});


$('#panic-button').click(function(){
    //the code that should stop the looping
}):
4

4 回答 4

3

循环开始后，您不能$.each使用click处理程序中断循环。JavaScript 执行是单线程的，所以click处理程序最多只能在线程空闲时排队等待——在循环完成之后。

但是，由于计时器是异步执行的，您可以通过保留和清除它们的每个 ID 来取消它们：

var timeouts = [];

$.each(someArray, function(index, value){
    timeouts.push(setTimeout(function(){
          console.log(index);
     },5000*index));
});


$('#panic-button').click(function(){
    $.each(timeouts, function (_, id) {
       clearTimeout(id);
    });

    timeouts = [];
}):
于 2012-07-12T00:22:06.037 回答
3

如果你想要一个in the background可以终止的循环，你必须模拟它，因为 js 本质上是单线程的，你的循环将阻塞直到它完成，然后你就可以点击一个按钮。

下面是一个例子，它使用settimeout来模拟一个可以点击取消的循环

小提琴

于 2012-07-12T00:35:51.503 回答
1

在 $.each() 之外创建函数返回值，并使用标志变量来确定是否单击了按钮。我一般使用“窗口”来声明全局函数和变量。

var panicButtonClicked = false;  
window.panicButtonClicked = panicButtonClicked;
var timeouts = [];
window.timeouts = timeouts;

$.each(someArray, function(index, value){
    if( !panicButtonClicked )
    {
         timeouts.push( setTimeout(function(){
          console.log(index);
         }, 5000*index) );
    }
});

$('#panic-button').click(function(){
    //the code that should stop the looping
    panicButtonClicked = true;
    $.each(timeouts, function (_, id) {
        clearTimeout(id);
    });
});

我在我的编辑中包含了 Jonathan Lonowski 给出的 for 循环。这个想法是相似的，除了你需要一个额外的变量来防止你的初始循环执行。这能解决你的问题吗？

于 2012-07-12T00:20:08.517 回答
0

你的答案很简单：

var $theTimeout =在您的处理程序中添加setTimeout并清除它click：clearTimeout($theTimeout).

http://www.w3schools.com/js/js_timing.asp

于 2012-07-12T00:13:50.590 回答