Parar a chamada setInterval em JavaScript

Estou usando setInterval(fname, 10000);para chamar uma função a cada 10 segundos em JavaScript. É possível parar de chamá-lo em algum evento?

Eu quero que o usuário possa parar a atualização repetida dos dados.

setInterval()retorna um ID de intervalo, para o qual você pode passar clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Veja os documentos para setInterval()e clearInterval().

Se você definir o valor de retorno setIntervalpara uma variável, poderá usá clearInterval-lo para pará-lo.

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

Você pode definir uma nova variável e aumentá-la em ++ (conte até uma) toda vez que for executada, então eu uso uma instrução condicional para finalizá-la:

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 ajude e esteja certo.

As respostas acima já explicaram como setInterval retorna um identificador e como esse identificador é usado para cancelar o timer de intervalo.

Algumas considerações arquitetônicas:

Por favor, não use variáveis ​​"sem escopo". A maneira mais segura é usar o atributo de um objeto DOM. O lugar mais fácil seria "documento". Se a atualização for iniciada por um botão Iniciar / Parar, você poderá usar o próprio botão:

<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 a função é definida dentro do manipulador de cliques do botão, você não precisa defini-la novamente. O temporizador pode ser retomado se o botão for clicado novamente.

Já respondi ... Mas se você precisar de um timer reutilizável em destaque que também suporte várias tarefas em diferentes intervalos, poderá usar meu TaskTimer (para Nó e 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();

No seu caso, quando os usuários clicam para interromper a atualização de dados; você também pode chamar timer.pause(), em seguida, timer.resume()se eles precisam de re-ativar.

Veja mais aqui .

O método clearInterval () pode ser usado para limpar um conjunto de cronômetros com o método setInterval ().

setInterval sempre retorna um valor de ID. Este valor pode ser passado em clearInterval () para parar o cronômetro. Aqui está um exemplo de timer começando de 30 e para quando ele se torna 0.

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

@cnu,

Você pode parar o intervalo, quando tenta executar o código antes de procurar no navegador do console (F12) ... tente comentar clearInterval (trigger) é procurar novamente um console, não um embelezador? : P

Veja exemplo uma 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>

Declare a variável para atribuir valor retornado de setInterval (...) e passe a variável atribuída para clearInterval ();

por exemplo

var timer, intervalInSec = 2;

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

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

// Em qualquer lugar que você tenha acesso ao timer declarado acima, chame 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);

Você também pode interromper o intervalo adicionando um ouvinte de evento, digamos um botão com o ID "stop-interval":

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

HTML:

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

Nota: O intervalo ainda será executado, mas nada acontecerá.

Foi assim que usei o método clearInterval () para parar o cronômetro após 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 interromper o intervalo após algum tempo.

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

Eu acho que o seguinte código ajudará:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Você fez o código 100% correto ... Então ... Qual é o problema? Ou é um tutorial ...

Por que não usar uma abordagem mais simples? Adicione uma turma!

Basta adicionar uma classe que diga ao intervalo para não fazer nada. Por exemplo: ao passar o 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>

Eu tenho procurado por essa abordagem rápida e fácil há muito tempo, por isso estou publicando várias versões para apresentar o maior número possível de pessoas.