Detener la llamada setInterval en JavaScript

Question

estoy usando setInterval(fname, 10000); llamar a una función cada 10 segundos en JavaScript.¿Es posible dejar de convocarlo en algún evento?

Quiero que el usuario pueda detener la actualización repetida de datos.

Answer 1

setInterval() devuelve un ID de intervalo, al que puede pasar clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Consulte los documentos para setInterval() y clearInterval().

Answer 2

Si establece el valor de retorno de setInterval a una variable, puedes usar clearInterval para detenerlo.

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

Answer 3

Puede configurar una nueva variable e incrementarla en ++ (cuenta uno) cada vez que se ejecuta, luego uso una declaración condicional para finalizarla:

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

Espero que te ayude y sea correcto.

Answer 4

Las respuestas anteriores ya han explicado cómo setInterval devuelve un identificador y cómo este identificador se usa para cancelar el temporizador de intervalo.

Algunas consideraciones arquitectónicas:

No utilice variables "sin alcance".La forma más segura es utilizar el atributo de un objeto DOM.El lugar más sencillo sería "documento".Si el repaso se inicia mediante un botón de inicio/parada, puede utilizar el botón en sí:

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

Dado que la función se define dentro del controlador de clic del botón, no es necesario que la vuelva a definir.El cronómetro se puede reanudar si se vuelve a hacer clic en el botón.

Answer 5

Ya respondido...Pero si necesita un temporizador reutilizable y destacado que también admita múltiples tareas en diferentes intervalos, puede usar mi Temporizador de tareas (para nodo y navegador).

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

En su caso, cuando los usuarios hacen clic para interrumpir la actualización de datos;también puedes llamar timer.pause() entonces timer.resume() si necesitan volver a habilitarlo.

Ver más aquí.

Answer 6

@cnu,

Puede detener el intervalo, cuando intente ejecutar el código antes de mirar el navegador de su consola (F12)...Intente comentar clearInterval(trigger) ¿Mira de nuevo una consola, no un embellecedor?:PAG

Consulte el ejemplo de una fuente:

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

Declarar variable para asignar el valor devuelto de setInterval (...) y pasar la variable asignada a clearInterval ();

p.ej.

var timer, intervalInSec = 2;

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

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

// Cualquier lugar al que tengas acceso Temporizador declarado anteriormente llamada clearInterval

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

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

Answer 8

El método clearInterval() se puede utilizar para borrar un temporizador configurado con el método setInterval().

setInterval siempre devuelve un valor de ID.Este valor se puede pasar en clearInterval() para detener el temporizador.A continuación se muestra un ejemplo de temporizador que comienza en 30 y se detiene cuando llega a 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);

También puede detener el intervalo agregando un detector de eventos a, digamos, un botón con el ID "intervalo de parada":

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

HTML:

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

Nota:El intervalo se seguirá ejecutando, aunque no pasará nada.

Answer 10

¿Por qué no utilizar un enfoque más sencillo?¡Agrega una clase!

Simplemente agregue una clase que le indique al intervalo que no haga nada.Por ejemplo:en vuelo estacionario.

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>

He estado buscando este método rápido y sencillo durante años, por lo que publicaré varias versiones para presentarlo a la mayor cantidad de personas posible.