Arrêtez l'appel setInterval en JavaScript

Question

Je utilise setInterval(fname, 10000); pour appeler une fonction toutes les 10 secondes en JavaScript. Est-il possible de cesser cet appel sur un certain événement?

Je veux que l'utilisateur soit capable d'arrêter le rafraîchissement répété de données.

Answer 1

setInterval() renvoie un ID d'intervalle, que vous pouvez passer à clearInterval() :

var refreshIntervalId = setInterval(fname, 10000);

/* plus tard */
clearInterval(refreshIntervalId);

Consultez la documentation de setInterval() et clearInterval().

Answer 2

Si vous définissez la valeur de retour de setInterval dans une variable, vous pouvez utiliser clearInterval pour l'arrêter.

var myTimer = setInterval(...);
clearInterval(myTimer);

Answer 3

Vous pouvez définir une nouvelle variable et l'incrémenter de ++ (ajouter un) à chaque fois qu'elle s'exécute, puis j'utilise une déclaration conditionnelle pour y mettre fin :

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* votre code va ici */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

J'espère que cela vous aide et est correct.

Answer 4

Les réponses ci-dessus ont déjà expliqué comment setInterval renvoie une poignée, et comment cette poignée est utilisée pour annuler le minuteur Interval.

Certaines considérations architecturales:

Veuillez ne pas utiliser de variables "sans portée". Le moyen le plus sûr est d'utiliser l'attribut d'un objet DOM. L'endroit le plus facile serait "document". Si le rafraîchisseur est lancé par un bouton start/stop, vous pouvez utiliser le bouton lui-même:

Start

function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //actualiser ici
        },10000);
        d.innerHTML='Stop';
    }
}

Étant donné que la fonction est définie à l'intérieur du gestionnaire de clic sur le bouton, vous n'avez pas à la redéfinir. Le minuterie peut être reprise si le bouton est à nouveau cliqué.

Answer 5

Déjà répondu... Mais si vous avez besoin d'un minuteur en vedette, réutilisable qui prend également en charge plusieurs tâches à des intervalles différents, vous pouvez utiliser mon TaskTimer (pour Node et navigateur).

// Minuteur avec une résolution d'intervalle de base de 1000 ms (1 seconde).
const timer = new TaskTimer(1000);

// Ajouter des tâches basées sur des intervalles de tick.
timer.add({
    id: 'job1',         // identifiant unique de la tâche
    tickInterval: 5,    // s'exécute tous les 5 ticks (5 x intervalle = 5000 ms)
    totalRuns: 10,      // s'exécute 10 fois seulement. (omettre pour un nombre illimité de fois)
    callback(task) {
        // code à exécuter à chaque exécution
        console.log(task.name + ' la tâche a été exécutée ' + task.currentRuns + ' fois.');
        // arrêter le minuteur à tout moment
        if (someCondition()) timer.stop();
        // ou simplement supprimer cette tâche si vous en avez d'autres
        if (someCondition()) timer.remove(task.id);
    }
});

// Démarrer le minuteur
timer.start();

Dans votre cas, lorsque les utilisateurs cliquent pour perturber le rafraîchissement des données; vous pouvez également appeler timer.pause() puis timer.resume() s'ils ont besoin de réactiver.

Voir plus ici.