web-dev-qa-db-fra.com

Arrêter l'appel de setInterval en JavaScript

J'utilise setInterval(fname, 10000); pour appeler une fonction toutes les 10 secondes en JavaScript. Est-il possible d'arrêter de l'appeler lors d'un événement?

Je souhaite que l'utilisateur puisse arrêter l'actualisation répétée des données.

javascriptsetinterval
1288
cnu

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

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Voir la documentation pour setInterval() et clearInterval() .

1995
John Millikin

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

var myTimer = setInterval(...);
clearInterval(myTimer);
102
Quintin Robinson

Vous pouvez définir une nouvelle variable et la faire incrémenter de ++ (en compter une) à chaque exécution, puis j'utilise une instruction conditionnelle pour la terminer:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

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

J'espère que ça aide et que c'est juste.

44
OMGrant

Les réponses ci-dessus ont déjà expliqué comment setInterval renvoie un descripteur et comment ce dernier est utilisé pour annuler le minuteur d'intervalle.

Quelques considérations architecturales:

Veuillez ne pas utiliser de variables "sans portée". Le moyen le plus sûr consiste à utiliser l'attribut d'un objet DOM. Le lieu le plus simple serait "document". Si le rafraîchissement est lancé par un bouton Démarrer/Arrêter, vous pouvez utiliser le bouton lui-même:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

Comme la fonction est définie dans le gestionnaire de clic sur le bouton, vous n'avez pas besoin de la définir à nouveau. La minuterie peut être reprise si le bouton est cliqué à nouveau.

13
Schien

Déjà répondu ... Mais si vous avez besoin d'une minuterie sélectionnée et réutilisable qui prend également en charge plusieurs tâches à différents intervalles, vous pouvez utiliser my TaskTimer (pour Node et le navigateur).

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add({
    id: 'job1',         // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (omit for unlimited times)
    callback(task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    }
});

// Start the timer
timer.start();

Dans votre cas, lorsque les utilisateurs cliquent pour perturber l’actualisation des données; vous pouvez également appeler timer.pause() puis timer.resume() si elles doivent être réactivées.

Voir plus ici .

9
Onur Yıldırım

@cnu,

Vous pouvez arrêter l’intervalle lorsque vous essayez d’exécuter du code avant de regarder votre navigateur de console (F12) ... essayez de commenter clearInterval (trigger) est-il à nouveau une console, pas une beauté? : P

Vérifiez exemple une source:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);
<div id="sandroalvares" style="background: gold; width:200px;">Author</div>
5
KingRider

La méthode clearInterval () peut être utilisée pour effacer un minuteur défini avec la méthode setInterval ().

setInterval renvoie toujours une valeur d'ID. Cette valeur peut être passée dans clearInterval () pour arrêter le chronomètre. Voici un exemple de minuterie commençant à 30 et s’arrêtant quand il devient 0.

  let time = 30;
  const timeValue = setInterval((interval) => {
  time = this.time - 1;
  if (time <= 0) {
    clearInterval(timeValue);
  }
}, 1000);
3
Sksaif Uddin

Déclarez la variable à affecter à la valeur renvoyée par setInterval (...) et transmettez la variable affectée à clearInterval ();

par exemple.

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

// Partout où vous avez accès timer déclaré au-dessus de l'appel clearInterval

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});
2
Yergalem
var keepGoing = true;
setInterval(function () {
     if (keepGoing) {
        //DO YOUR STUFF HERE            
        console.log(i);
     }
     //YOU CAN CHANGE 'keepGoing' HERE
  }, 500);

Vous pouvez également arrêter l'intervalle en ajoutant un écouteur d'événement à un bouton avec l'ID "stop-interval":

$('buuton#stop-interval').click(function(){
   keepGoing = false;
});

HTML:

<button id="stop-interval">Stop Interval</button>

Remarque: l'intervalle sera toujours exécuté, mais rien ne se passera.

0
Nadav

Voici comment j'ai utilisé la méthode clearInterval () pour arrêter le chronomètre après 10 secondes.

function startCountDown() {
  var countdownNumberEl = document.getElementById('countdown-number');
  var countdown = 10;
  const interval = setInterval(() => {
    countdown = --countdown <= 0 ? 10 : countdown;
    countdownNumberEl.textContent = countdown;
    if (countdown == 1) {
      clearInterval(interval);
    }
  }, 1000)
}
<head>
  <body>
    <button id="countdown-number" onclick="startCountDown();">Show Time </button>
  </body>
</head>
0
Ishara Amarasekera