Can a setInterval function stop itself?
Here you go:
var stopBtn = $( '#stop' );
$( '.test' ).each(function ( i, elem ) {
var tid = setInterval(function () {
if ( elem.parentNode ) {
stopBtn.html(function ( i, num ) { return parseInt(num,10) + 1; });
} else {
clearInterval( tid );
}
}, 1000);
});
stopBtn.click(function () {
$( '.test' ).remove();
});
Explanation:
First of all we need a closure - the interval function needs to know which test-DIV is its "owner", ergo, we need to pass a reference to the DIV into the interval function. In my code, that reference is stored in the elem
variable, which is available inside the interval function because of closure. So, the interval function checks whether or not its "owner" DIV is still attached to the DOM (by examining its parent node). If it is, the stop-button is incremented. If it's not, the interval is cleared. However, in order to be able to clear the interval, we require its timer ID. We have this ID, because we stored it inside the "tid" variable (the setInterval call returns the timer ID).
Live demo: http://jsfiddle.net/simevidas/ZjY7k/15/
Late to the party, but I solved this way:
var id = setInterval(function()
{
if(some_condition)
{
clearInterval(id);
}
}, 1000);
Definitely the simplest way out of all: no unnecessary storing, no tricks.