Interrompi setInterval call in JavaScript

Question

Sto usando setInterval (fname, 10000); per chiamare una funzione ogni 10 secondi in JavaScript. È possibile smettere di chiamarlo per qualche evento?

Voglio che l'utente sia in grado di interrompere il ripetuto aggiornamento dei dati.

Answer 1

setInterval () restituisce un ID intervallo, che è possibile passare a clearInterval () :

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Consulta i documenti per setInterval () e clearInterval () .

Answer 2

Se si imposta il valore restituito di setInterval su una variabile, è possibile utilizzare clearInterval per interromperlo.

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

Answer 3

Puoi impostare una nuova variabile e farla incrementare di ++ (conta una) ogni volta che viene eseguita, quindi uso un'istruzione condizionale per terminarla:

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

Spero che sia d'aiuto ed è giusto.

Answer 4

Le risposte sopra hanno già spiegato come setInterval restituisce un handle e come questo handle viene utilizzato per annullare il timer intervallo.

Alcune considerazioni sull'architettura:

Non utilizzare " scope-less " variabili. Il modo più sicuro è utilizzare l'attributo di un oggetto DOM. Il posto più semplice sarebbe "document". Se l'aggiornamento è avviato da un pulsante di avvio / arresto, è possibile utilizzare il pulsante stesso:

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

Poiché la funzione è definita all'interno del gestore di clic sui pulsanti, non è necessario definirla di nuovo. Il timer può essere ripreso se si fa nuovamente clic sul pulsante.

Answer 5

Già risposto ... Ma se hai bisogno di un timer in primo piano e riutilizzabile che supporti anche più attività su intervalli diversi, puoi usare il mio TaskTimer (per Nodo e browser).

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

Nel tuo caso, quando gli utenti fanno clic per disturbare l'aggiornamento dei dati; puoi anche chiamare timer.pause () quindi timer.resume () se devono riattivare.

Vedi altro qui .

Answer 6

@cnu,

Puoi interrompere l'intervallo, quando prova a eseguire il codice prima di guardare il tuo browser della console (F12) ... prova a commentare clearInterval (trigger) è di nuovo una console, non un beautizer? : P

Controlla l'esempio di una fonte:

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

Dichiara variabile per assegnare il valore restituito da setInterval (...) e passa la variabile assegnata a clearInterval ();

per es.

var timer, intervalInSec = 2;

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

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

// Ovunque tu abbia accesso al timer dichiarato sopra chiama clearInterval

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

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

Answer 8

Il metodo clearInterval () può essere utilizzato per cancellare un set di timer con il metodo setInterval ().

setInterval restituisce sempre un valore ID. Questo valore può essere passato in clearInterval () per arrestare il timer. Ecco un esempio di timer che parte da 30 e si ferma quando diventa 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);

Puoi anche interrompere l'intervallo aggiungendo un listener di eventi per dire un pulsante con l'ID " stop-intervallo " ;:

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

HTML:

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

Nota: l'intervallo verrà comunque eseguito, tuttavia non accadrà nulla.

Answer 10

Perché non usare un approccio più semplice? Aggiungi un corso!

Aggiungi semplicemente una classe che dice all'intervallo di non fare nulla. Ad esempio: al passaggio del mouse.

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>

Ho cercato questo approccio semplice e veloce per anni, quindi sto pubblicando diverse versioni per presentare quante più persone possibile.