Kann eine setInterval-Funktion sich selbst anhalten?

Question

Ich habe eine jsFiddle ein Beispiel, an dem wir arbeiten können.

$().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();
    });
});

Ich möchte eine Worker-Funktion an ein Element im DOM anhängen, so dass, wenn das Element entfernt wird, die Worker-Funktion stoppt.

Ist so etwas möglich?

Answer 1

Es ist eine wenig bekannte Tatsache, aber setInterval gibt einen Wert zurück, den Sie mit clearInterval um das Intervall abzubrechen.

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

Answer 2

Verwenden Sie 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 3

Javascrip verwendet eine andere Reihenfolge für die Bewertung von Aufgaben. Das heißt, sie werden von links nach rechts ausgewertet, was bedeutet, dass Sie die Variable innerhalb ihres Ausdrucks verwenden können.

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 diesem speziellen Beispiel wird das Intervall nur einmal ausgeführt und 1 Sekunde nach seiner Definition wieder gelöscht.