javascript - Stop a loop with an click event jQuery - Stack Overflow

admin管理员组

文章数量:1333693

I am looking for a way to stop a loop with a click event(sort of panic button). If you click the button it should stop immediately.

// basic idea

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


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

I am looking for a way to stop a loop with a click event(sort of panic button). If you click the button it should stop immediately.

// basic idea

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


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

• javascript
• jquery
• loops
• each

Share Improve this question Follow asked Jul 12, 2012 at 0:07 user759235user759235 2,20733 gold badges4242 silver badges8585 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can't interrupt the $.each loop with a click handler once the loop has started. JavaScript execution is single-threaded, so the click handler will at best be queued up for the next time the thread is free -- after the loop has finished.

However, as timers are executed asynchronously, you can cancel them by keeping and clearing each of their IDs:

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 = [];
}):

If you want to have a loop in the background that you can terminate you'll have to simulate it because js is essentially single threaded, and your loop will block until it finishes then you'll be able to click a button.

Here is an example, it uses settimeout to simulate a loop that can be cancelled by a click

FIDDLE

Create the function return value outside of the $.each() and use a flag variable to determine whether or not the button was clicked. I generally declare the global functions and variables using "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);
    });
}); 

I've included the for loop given by Jonathan Lonowski in my edit. The idea is similar, except that you'd need an extra variable to prevent your initial loop from executing. Does this solve your problem ?

You're answer is very simple:

Add var $theTimeout = in front of setTimeout and clear it in your click handler: clearTimeout($theTimeout).

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

本文标签： javascriptStop a loop with an click event jQueryStack Overflow