JavaScript

Como parar um setInterval em JavaScript

20 de abril de 2021

Como parar um setInterval em JavaScript

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

Como parar um setInterval capa

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

Subscribe
Notify of
guest
3 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Othon Felipe

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?

Battisti

opa Othon, tenta a função clearInterval…

rafael sapede

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);

3
0
Would love your thoughts, please comment.x