Arrêter l'appel de setInterval en JavaScript

Question

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.

Answer 1

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

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

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

Answer 2

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

Answer 3

Vous pouvez définir une nouvelle variable et l’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 cela aide et que c'est juste.

Answer 4

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

Quelques considérations architecturales:

Veuillez ne pas utiliser " scope-less " variables. Le moyen le plus sûr consiste à utiliser l'attribut d'un objet DOM. Le plus simple serait "document". Si le rafraîchissement est lancé par un bouton marche / arrêt, 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>

La fonction étant 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.

Answer 5

Déjà répondu ... Mais si vous avez besoin d'un chronomètre réutilisable qui supporte également plusieurs tâches à différents intervalles, vous pouvez utiliser mon TaskTimer (pour le noeud 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 () s’ils doivent être réactivés.

Voir pour en savoir plus ici .

Answer 6

@cnu,

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

Vérifiez l'exemple d'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>

Answer 7

Déclarez la variable à affecter à la valeur renvoyée par setInterval (...) et passez la variable assigné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);
}

// N'importe où vous avez accès au minuteur déclaré au-dessus de l'appel clearInterval

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

       clearInterval(timer);// Stops or does the work
});

Answer 8

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

Answer 9

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 "interval-stop":

$('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.

Answer 10

Pourquoi ne pas utiliser une approche plus simple? Ajouter une classe!

Ajoutez simplement une classe qui indique à l’intervalle de ne rien faire. Par exemple: en vol stationnaire.

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
  }
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}

<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause</button></p>

Je recherche cette approche rapide et facile depuis des années. Je publie donc plusieurs versions pour présenter le plus grand nombre de personnes possible.