Arrêter l'appel 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 veux que l'utilisateur puisse arrêter le rafraîchissement répété des données.

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

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Voir les documents pour setInterval()et clearInterval().

Si vous définissez la valeur de retour de setIntervalsur une variable, vous pouvez utiliser clearIntervalpour l'arrêter.

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

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 cela aide et c'est juste.

Les réponses ci-dessus ont déjà expliqué comment setInterval renvoie un descripteur et comment ce descripteur est utilisé pour annuler le temporisateur 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. L'endroit le plus simple serait le «document». Si le rafraîchissement est démarré 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>

Puisque la fonction est définie à l'intérieur du gestionnaire de clic de bouton, vous n'avez pas besoin de la définir à nouveau. Le chronomètre peut être repris si le bouton est de nouveau cliqué.

Déjà répondu ... Mais si vous avez besoin d'une minuterie en vedette, réutilisable qui prend également en charge plusieurs tâches à différents intervalles, vous pouvez utiliser mon TaskTimer (pour Node et 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()ensuite timer.resume()si elles ont besoin pour réactiver.

Voir plus ici .

La méthode clearInterval () peut être utilisée pour effacer un ensemble de temporisations avec la méthode setInterval ().

setInterval renvoie toujours une valeur d'ID. Cette valeur peut être passée dans clearInterval () pour arrêter le temporisateur. Voici un exemple de temporisateur 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);

@cnu,

Vous pouvez arrêter l'intervalle, lorsque vous essayez d'exécuter du code avant de regarder votre navigateur de console (F12) ... : P

Vérifiez par 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>

Déclarez la variable pour affecter la valeur renvoyée par setInterval (...) et passez 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 au minuteur déclaré ci-dessus, appelez clearInterval

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

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

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énements, disons 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 cependant.

C'est ainsi que 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>

Utilisez setTimeOut pour arrêter l'intervalle après un certain temps.

var interVal = setInterval(function(){console.log("Running")  }, 1000);
 setTimeout(function (argument) {
    clearInterval(interVal);
 },10000);

Je suppose que le code suivant vous aidera:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Vous avez fait le code 100% correct ... Alors ... Quel est le problème? Ou c'est un tutoriel ...

Pourquoi ne pas utiliser une approche plus simple? Ajoutez 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 cherchais cette approche rapide et facile depuis des lustres, donc je poste plusieurs versions pour l'introduire autant de personnes que possible.