Pregunta Detener setInterval llamada en JavaScript


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 repetida actualización de datos.


1118
2017-09-20 19:29


origen


Respuestas:


setInterval() devuelve una identificación de intervalo, que puede pasar a clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

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


1752
2017-09-20 19:30



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

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

92
2017-09-20 19:32



Puede establecer una nueva variable y aumentarla en ++ (contar hasta uno) cada vez que se ejecuta, y luego usar una sentencia 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.


35
2018-05-16 14:02



Las respuestas anteriores ya explicaron cómo setInterval devuelve un identificador y cómo este identificador se utiliza 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 / detención, 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>

Dado que la función se define dentro del controlador de clic de botón, no tiene que definirlo de nuevo. El temporizador se puede reanudar si se vuelve a hacer clic en el botón.


10
2018-01-19 05:46



@cnu,

Puede detener el intervalo, cuando intente ejecutar el código antes de mirar el navegador de la consola (F12) ... intente comentar clearInterval (desencadenar) es buscar nuevamente 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>


4
2018-01-08 17:30



Ya respondí ... Pero si necesita un temporizador destacado y reutilizable 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 alterar la actualización de datos; Puedes llamar timer.pause() entonces timer.resume() si necesitan volver a habilitar.

Ver más aquí.


4
2017-08-23 15:14



Declarar la variable para asignar el valor devuelto por 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);
}

// En cualquier lugar al que tengas acceso minutero declarada llamada anterior clearInterval

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

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

0
2017-10-17 20:15



¿Por qué no usar un enfoque más simple? 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 enfoque rápido y fácil para las edades, por lo que estoy publicando varias versiones para presentar la mayor cantidad de gente posible.


-4
2018-04-27 18:04