As funções setTimeout e setInterval no Javascript, são temporizadores que são executados sem bloquear a execução do javascript.
As duas funções são parecidas. No primeiro parâmetro informamos a função que será executada e no segundo parâmetro informamos o tempo em milissegundos. (1000 milissegundos = 1 segundo)
setTimeout
Temporizador que executa uma função após um intervalo de tempo.
setTimeout(() => {
console.log("Executando após 5 segundos!")
}, 5000)
console.log("Executando primeiro.")
Resultado
Executando primeiro.
Executando após 5 segundos!
setInterval
Temporizador que executa uma função repetidamente em um intervalo de tempo.
setInterval(() => {
console.log("Executando a cada 5 segundos!")
}, 5000)
# exibindo uma string após criar o setTimeout
console.log("Executando primeiro apenas 1 vez.")
Resultado
Executando primeiro apenas 1 vez.
Executando a cada 5 segundos!
Executando a cada 5 segundos!
Executando a cada 5 segundos!
Executando a cada 5 segundos!
...
Cancelando setTimeout e setInterval
Além de criar os temporizadores, existe uma forma de cancela-los. Para fazer isso, precisamos criar esses temporizadores usando uma variável e chamar as funções que cancelam o temporizador:
clearTimeout para cancelar o setTimeoutclearInterval para cancelar o setInterval
clearTimeout
// Criando o temporizador
let meuTimeout = setTimeout(() => {
console.log("Vou aparecer após 10 segundos!")
}, 10 * 1000)
// cancelando o temporizador
clearTimeout(meuTimeout)
clearInterval
// Criando o temporizador
let meuInterval= setInterval(() => {
console.log("Vou aparecer a cada 3 segundos!")
}, 3 * 1000)
// cancelando o temporizador
clearInterval(meuInterval)
🚀 Exercício: Contagem Regressiva
Vamos criar um script de contagem regressiva usando o temporizador setInterval.
let contagemRegressiva = 10;
console.log("Iniciando contagem regressiva para o lançamento do Foguete!")
let lancamentoInterval = setInterval(() => {
console.log(`${contagemRegressiva}...`)
contagemRegressiva -= 1
if ( contagemRegressiva == 0 ) {
clearInterval( lancamentoInterval )
}
}, 1000)
console.log('Decolando!!!')
Resultado
Iniciando contagem regressiva para o lançamento do Foguete!
10...
9...
8...
7...
6...
5...
4...
3...
2...
1...
0...
Decolando!!!
