Une fonction setInterval peut-elle s'arrêter?

J'ai un jsFiddle avec un exemple de notre travail.

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

Ce que je voudrais faire est de fixer un travailleur de la fonction à un élément dans le DOM de sorte que lorsque l'élément est supprimé, le travailleur de la fonction s'arrête.

Est quelque chose comme cela possible?

source d'informationauteur Justin808

  1. 10

    Ici, vous allez:

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

    Explication:

    Tout d'abord nous avons besoin d'une fermeture - la fonction d'intervalle besoin de savoir quel test-DIV est son "propriétaire", ergo, nous avons besoin de passer une référence à la DIV dans la fonction d'intervalle. Dans mon code, la référence est stockée dans la elem variable, qui est disponible à l'intérieur de l'intervalle de la fonction en raison de la fermeture. Donc, l'intervalle de la fonction vérifie si oui ou non son "propriétaire" DIV est encore attaché à la DOM (par l'examen de son nœud parent). Si elle l'est, le stop-bouton est incrémenté. Si elle ne l'est pas, l'intervalle est effacé. Toutefois, afin d'être en mesure d'effacer l'intervalle, nous avons besoin de son ID de minuterie. Nous avons cette ID, parce que nous avons stocké à l'intérieur de la "tid" variable de la fonction setInterval appel renvoie l'ID de minuterie).

    Démo Live: http://jsfiddle.net/simevidas/ZjY7k/15/

  2. 15

    La fin de la partie, mais j'ai résolu de cette façon:

    var id = setInterval(function()
{
    if(some_condition)
    {
        clearInterval(id);
    }
}, 1000);

    Certainement le moyen le plus simple de tous: pas de superflu le stockage, pas de trucs.

  3. 2

    Une autre façon que vous pouvez supprimer les intervalles, est à l'aide de la fonction clearInterval à l'intérieur de l'intervalle.

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

    Si l'intervalle n'est pas clair, il va afficher un message d'alerte disant, "L'intervalle n'a pas clairement". Sinon, l'intervalle avec succès effacé.

  4. 1

    C'est un fait peu connu, mais setInterval renvoie une valeur que vous pouvez utiliser avec clearInterval pour annuler l'intervalle.

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

    Je soupçonne que la bonne façon de mettre en œuvre une "auto-terminaison" intervalle est de mettre en œuvre l'intervalle de via une série de délais d'attente.

    En semi-pseudo:

    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)

    Cette répétition de minuterie nettoie après lui-même.

  6. 0

    Utiliser la fonction 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();
    });
});