Neste artigo você vai aprender a como parar um setInterval em JavaScript, ou seja, anular a execução do timer, removendo o que seria executado
Fala programador(a), beleza? Bora aprender mais sobre funções do JavaScript e também sobre a linguagem!
Podemos atribuir o setInterval a uma variável, isso terá o mesmo resultado da aplicação do recurso sem a variável
Porém ao fazer desta maneira temos uma “referência” ao recurso
O que pode ser utilizado posteriormente na função de remoção do evento, que é a clearInterval
Tornando então extremamente útil fazer desta maneira
Veja um exemplo prático da solução:
var meuInterval = setInterval(function() {
console.log("testando");
}, 5000);
clearInterval(meuInterval);Criamos neste código a variável meuInterval, que contém um setInterval, a função anônima e um tempo para execução
Ou seja, após 5 segundos teremos a execução do console.log
Porém logo em seguida utilizamos o clearInterval, que vai romper o efeito de meuInterval
Apenas precisamos passar como argumento da função a variável que criamos anteriormente, que contém o interval
E desta maneira paramos o setInterval com sucesso!
Conclusão
Neste artigo você aprendeu a como parar um setInterval em JavaScript
Utilizamos a função clearInterval, que tem justamente este objetivo
Precisamos encapsular o setInterval em uma variável e quando for necessário parar o evento, utilizar o clearInterval
E passar como argumento para ele a variável criada com o interval
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Muito boa a explicação.
E como eu faria, por exemplo, para parar o setInterval (ou a incrementação) após a contagem chegar a um determinado valor?
Eu faço isso:
let num = 0; setInterval(() => { num++; if(num === 10){ num = 10; } }, 1000);Mas eu gostaria que o valor da variável num parasse de incrementar e assumisse o valor de 10. Deu para entender o meu raciocínio?
opa Othon, tenta a função clearInterval…
let num = 0;
const contador = setInterval(() => num < 11 ? console.log(num++) : (console.log(“fim”) , clearInterval(contador)), 1000);
tenta esse código, em count vc controla aonde ele quer parar e no final das chaves de setInterval vc controla a velocidade que os números passam
var count = 0
var aleatorio = setInterval(function(){
count++
if(count === 10){
clearInterval(aleatorio)
}
resultado.innerHTML =
</span><span style="color: rgb(255, 121, 198);">${</span>count<span style="color: rgb(255, 121, 198);">}</span><span style="color: rgb(241, 250, 140);">}, 100);