javascript - stop - setinterval js mdn

Detener llamada setInterval en JavaScript

Question

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

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

Answer 1

¿Por qué no utilizar un enfoque más simple? Añadir una clase!

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

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 enfoque rápido y fácil durante años, así que estoy publicando varias versiones para presentarle a la mayor cantidad de personas posible.

Answer 2

@cnu,

Puede detener el intervalo, cuando intente ejecutar el código antes de mirar su navegador de consola (F12) ... intente comentar. ClearInterval (disparador) es otra vez una consola, no un embellecedor. :PAG

Ver ejemplo 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 3

Declare la variable para asignar el valor devuelto desde setInterval (...) y pase 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);
}

// En cualquier lugar que tenga acceso al temporizador declarado arriba, llame a clearInterval

$(''.htmlelement'').click( function(){ // any event you want
clearInterval(timer);// Stops or does the work
});

Answer 4

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

Algunas consideraciones arquitectónicas:

Por favor, no use variables "sin alcance". La forma más segura es usar el atributo de un objeto DOM. El lugar más fácil sería "documento". Si la actualización se inicia con un botón de inicio / parada, puede usar 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>

Como la función está definida dentro del controlador de clic de botón, no es necesario que la vuelva a definir. El temporizador se puede reanudar si se vuelve a hacer clic en el botón.

Answer 5

Puedes establecer una nueva variable y hacer que aumente en ++ (cuente una) cada vez que se ejecute, 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 ayude y sea correcto.

Answer 6

Si establece el valor de retorno de setInterval en una variable, puede usar clearInterval para detenerlo.

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

Answer 7

Ya respondí ... Pero si necesita un temporizador reutilizable y destacado que también admita múltiples tareas en diferentes intervalos, puede usar mi TaskTimer (para Nodo y navegador).

// Timer with 1000ms (1 second) base interval resolution.
var timer = new TaskTimer(1000);
// Add task(s) based on tick intervals.
timer.addTask({
name: ''job1'', // unique name of the task
tickInterval: 5, // run every 5 ticks (5 x interval = 5000 ms)
totalRuns: 10, // run 10 times only. (set to 0 for unlimited times)
callback: function (task) {
// code to be executed on each run
console.log(task.name + '' task has run '' + task.currentRuns + '' times.'');
}
});
// Start the timer
timer.start();

En su caso, cuando los usuarios hacen clic para perturbar la actualización de datos; puede llamar timer.pause() luego timer.resume() si necesitan volver a habilitarlo.

Ver más aquí .

Answer 8

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

var refreshIntervalId = setInterval(fname, 10000);
/* later */
clearInterval(refreshIntervalId);

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

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 para decir un botón con el ID "intervalo de detención":

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

HTML:

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

Nota: el intervalo todavía se ejecutará, aunque no sucederá nada.