Question

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

//基本理念

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


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

Answer 1

循环开始后，您无法使用$.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 = [];
}):

Answer 2

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

以下是一个示例，它使用settimeout来模拟可以通过单击取消的循环

FIDDLE

Answer 3

在$ .each（）之外创建函数返回值，并使用flag变量来确定是否单击了该按钮。我通常使用“window”来声明全局函数和变量。

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循环。这个想法是类似的，除了你需要一个额外的变量来防止你的初始循环执行。这会解决您的问题吗？

Answer 4

你的答案非常简单：

在var $theTimeout =前添加setTimeout并在click处理程序中清除clearTimeout($theTimeout)。

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

使用单击事件jQuery停止循环

4 个答案: