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

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

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

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

Si establece el valor de retorno de setIntervaluna variable, puede usar clearIntervalpara detenerlo.

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

Puede establecer una nueva variable y aumentarla en ++ (cuente hasta una) cada vez que se ejecute, luego uso una instrucció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.

Las respuestas anteriores ya explicaron cómo setInterval devuelve un controlador y cómo se utiliza este controlador 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>

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

Ya respondí ... Pero si necesita un temporizador destacado y reutilizable que también sea compatible con múltiples tareas en diferentes intervalos, puede usar mi TaskTimer (para Node 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 alterar la actualización de datos; También puede llamar timer.pause()a continuación, timer.resume()si tienen que volver a habilitar.

Ver más aquí .

El método clearInterval () se puede usar para borrar un conjunto de temporizadores con el método setInterval ().

setInterval siempre devuelve un valor de ID. Este valor se puede pasar en clearInterval () para detener el temporizador. Aquí hay un ejemplo de temporizador que comienza desde 30 y se detiene cuando se convierte en 0.

  let time = 30;
  const timeValue = setInterval((interval) => {
  time = this.time - 1;
  if (time <= 0) {
    clearInterval(timeValue);
  }
}, 1000);

@cnu,

Puede detener el intervalo, cuando intente ejecutar el código antes de buscar su navegador de consola (F12) ... intente comentar clearInterval (trigger) es buscar nuevamente una consola, no un embellecedor? :PAGS

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>

Declare la variable para asignar el valor devuelto por 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 al que tenga acceso al temporizador declarado anteriormente, llame a 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);

También puede detener el intervalo agregando un detector de eventos a, digamos, 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 se seguirá ejecutando, sin embargo, no pasará nada.

Así es como utilicé el método clearInterval () para detener el temporizador después de 10 segundos.

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>

Use setTimeOut para detener el intervalo después de un tiempo.

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

Supongo que el siguiente código ayudará:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Hiciste el código 100% correcto ... Entonces ... ¿Cuál es el problema? O es un tutorial ...

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

Simplemente agregue una clase que le diga 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 durante años, por lo que publico varias versiones para presentarle a la mayor cantidad de personas posible.