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

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!

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

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

A versão moderna do mesmo código:

O exemplo acima usa var e função anônima, que é o jeito clássico e continua funcionando numa boa

Mas se tu está escrevendo código novo hoje, o padrão é guardar a referência em const e usar arrow function

const meuInterval = setInterval(() => {
console.log('testando')
}, 5000)

clearInterval(meuInterval)

O resultado é exatamente o mesmo, muda só a escrita

E o const aqui não atrapalha em nada: tu nunca vai reatribuir essa variável, só passar ela pro clearInterval 🙂

Como parar o setInterval de dentro dele mesmo:

Esse é o caso mais comum de todos: tu quer repetir alguma coisa um número X de vezes e parar sozinho, sem depender de ninguém clicar em nada

Pra isso o clearInterval vai DENTRO da própria função, junto de uma condição

let contador = 0

const meuInterval = setInterval(() => {
contador++
console.log('execução número ' + contador)

if (contador === 3) {
clearInterval(meuInterval)
}
}, 1000)

Aqui a função roda três vezes e o timer se encerra sozinho

Funciona porque a variável meuInterval já está criada lá fora quando a função é executada pela primeira vez, então dá pra usar ela lá dentro tranquilamente

Se liga que a condição é tua: pode ser um contador, pode ser o fim de uma animação, pode ser a resposta de uma requisição chegando

Parando o setInterval com um clique do usuário:

Outro cenário clássico: alguma coisa rodando na tela e um botão de parar

O segredo aqui é declarar a variável do interval FORA das funções, senão cada função enxerga uma coisa diferente e o clearInterval não pega nada

<button id='iniciar'>Iniciar</button>
<button id='parar'>Parar</button>

let meuInterval = null

document.querySelector('#iniciar').addEventListener('click', () => {
if (meuInterval !== null) return

meuInterval = setInterval(() => {
console.log('rodando...')
}, 1000)
})

document.querySelector('#parar').addEventListener('click', () => {
clearInterval(meuInterval)
meuInterval = null
})

Repara no if (meuInterval !== null) return

Ele impede que o usuário clique em Iniciar várias vezes e crie vários timers rodando ao mesmo tempo

E zerar a variável depois do clearInterval deixa claro que não tem mais nada rodando ali

Que é justamente o próximo problema…

O clearInterval não funciona? Os erros mais comuns:

Se tu chamou o clearInterval e mesmo assim a função continua sendo executada, quase sempre é um destes três

1) A variável do interval foi declarada dentro da função

Cada execução cria uma variável nova e a referência do timer some, aí não sobra o que limpar

2) O setInterval foi chamado mais de uma vez

Cada chamada cria um timer NOVO e devolve uma referência nova

Se tu guardou só a última, as anteriores continuam rodando e o clearInterval mata só uma delas

3) Foi passada a função em vez da referência

// errado
clearInterval(minhaFuncao)

// certo
clearInterval(meuInterval)

O argumento do clearInterval é a variável que guarda o RETORNO do setInterval, não o nome da função que roda lá dentro

Tome cuidado com o item 2, é o mais traiçoeiro de todos: a tela parece normal e os timers vão empilhando por baixo dos panos

Qual a diferença entre clearInterval e clearTimeout?

Pergunta que aparece direto, e a resposta é simples: cada um limpa o seu

O setInterval repete a função de tempos em tempos, e quem cancela ele é o clearInterval

O setTimeout executa a função uma única vez depois do tempo combinado, e quem cancela ele é o clearTimeout

const meuTimeout = setTimeout(() => {
console.log('só uma vez')
}, 5000)

clearTimeout(meuTimeout)

A lógica é idêntica à do post inteiro: guarda a referência numa variável e passa ela pra função de limpeza

Só não troca as bolas na hora de cancelar 😀

Como parar vários setInterval de uma vez?

Quando a página tem mais de um timer rodando, o caminho confiável é organizar as referências na mão

A ideia é guardar cada uma numa lista e limpar a lista inteira quando precisar

timers.push(setInterval(() => console.log('um'), 1000))
timers.push(setInterval(() => console.log('dois'), 2000))

function pararTudo() {
timers.forEach((timer) => clearInterval(timer))
timers.length = 0
}

Simples e resolve

E de quebra tu passa a ter um lugar único com tudo que está rodando, o que ajuda MUITO na hora de caçar aquele timer fantasma que ficou vivo

Sempre limpe o interval quando a tela sai do ar:

Na época das páginas simples isso quase não incomodava

Hoje quase tudo é aplicação de página única, com componentes entrando e saindo da tela o tempo todo

E o setInterval não liga a mínima pra isso: se ninguém chamar o clearInterval, ele continua rodando mesmo depois que o elemento sumiu

O resultado é aquele bug chato de achar: função disparando pra um pedaço de tela que nem existe mais, e a cada volta na mesma tela nasce mais um timer

A regra é curta: todo setInterval criado dentro de um componente precisa de um clearInterval no momento em que esse componente é destruído

Guarda a referência e chama o clearInterval na rotina de limpeza

Vale o mesmo raciocínio pra timer que só faz sentido enquanto o usuário está numa aba ou numa etapa específica do fluxo