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
}):
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
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).
each construct. You'd need to save them in an array and clearTimeout on all of them