Can a setInterval function stop itself?

Question

I have a jsFiddle up with an example to work from.

$().ready(function() {
    $('.test').each(function() {
        $this = $(this);
        $this.data('Worker', function() {
            $('#stop').html((parseInt($('#stop').html()) + 1))
        })
        setInterval($this.data('Worker'), 100);
    });

    $('#stop').click(function() {
        // I want the worker function to stop being triggered here
        $('.test').remove();
    });
});

What I would like to do is attach a worker function to an element in the DOM so that when the element is removed, the worker function stops.

Is something like this possible?

Answer 1

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.

Answer 2

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/

Answer 3

Another way that you can remove intervals, is using the clearInterval inside the interval.

window.setInterval(function(){
    // Do all your stuff here
    if(/*something something*/){
        window.clearInterval(this);
        alert("The interval didn't clear");
    }
}, /*However long*/);

If the interval doesn't clear, it will show an alert saying, "The interval didn't clear". Otherwise, the interval sucessfully cleared.

Answer 4

I suspect that the proper way to implement a "self-terminating" interval is to implement the interval via a series of timeouts.

In semi-pseudocode:

setTimeout(function repeat() {
  if (continue_to_run) // this code here may cause timing to be inaccurate
    setTimeout(repeat, interval_duration);
  do_task_on_interval();
}, 0)

This repeating timer cleans up after itself.

Answer 5

Maybe it's too late but here's my contribution:

/**
 * This function sleep each intervalMs until filter is true, when filter is true this function 
 * resolve promise and clean it self.
 * @param {*} intervalMs
 * @param {*} filter
 * @returns Promise<Void>
 */
const sleepUntil = (intervalMs, filter) => {
    let id = null;
    return new Promise((resolve) => {
        id = setInterval(() => {
            if (filter()) { resolve(); }
        }, intervalMs);
    }).then(() => {
        id = clearInterval(id);
    });
};

I use for Mutex behaviour like these:

waitToSyncronize() {
    return sleepUntil(50, () => this.syncronizing === false);
}

Answer 6

It's a little-known fact, but setInterval returns a value that you can use with clearInterval to cancel the interval.

var result = setInterval(function, delay);
// at some point later...
clearInterval(result);

Answer 7

Use clearInterval:

$().ready(function () {
    $('.test').each(function () {
        $this = $(this);
        $this.data('Worker', function () { $('#stop').html((parseInt($('#stop').html()) + 1)) })
        $this.data('intervalId', setInterval($this.data('Worker'), 100));
    });

    $('#stop').click(function () {
        $('.test').each(function() { clearInterval($(this).data('intervalId')); }).remove();
    });
});

Answer 8

Javascrip use a different order of evaluation for assignments. That said, they are evaluated from left to right, meaning you can use the variable inside its expression.

const stop = setInterval(() => {
  // Execute the function body.
  console.log('Executed')
  // When you want to stop it, you
  // can clear the interval with the
  // stop handler.
  clearInterval(stop)
}, 1000)

In that particular example, the interval is executed only once and cleared after 1 second of defining it.