Descubra os Temporizadores JavaScript

setTimeout()

Ao escrever código JavaScript, você pode querer atrasar a execução de uma função.

Este é o trabalho do setTimeout. Você especifica uma função de callback para executar mais tarde e um valor expressando o quão tarde você deseja que ela seja executada, em milissegundos:

setTimeout(() => {
  // executa após 2 segundos
}, 2000)
setTimeout(() => {
  // executa após 50 milissegundos
}, 50)

Esta sintaxe define uma nova função. Você pode chamar qualquer outra função que desejar ali, ou pode passar um nome de função existente e um conjunto de parâmetros:

const myFunction = (firstParam, secondParam) => {
  // faça algo
}
// executa após 2 segundos
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout retorna o id do temporizador. Isso geralmente não é usado, mas você pode armazenar este id e limpá-lo se quiser excluir esta execução de função agendada:

const id = setTimeout(() => {
  // deve executar após 2 segundos
}, 2000)
// Mudei de ideia
clearTimeout(id)

Atraso zero

Se você especificar o atraso de tempo limite para 0, a função de callback será executada o mais rápido possível, mas após a execução da função atual:

setTimeout(() => {
  console.log('depois ')
}, 0)
console.log(' antes ')

Este código imprimirá

antes
depois

Isso é especialmente útil para evitar bloquear a CPU em tarefas intensivas e permitir que outras funções sejam executadas enquanto executa um cálculo pesado, colocando funções em fila no planejador.

TIP

Alguns navegadores (IE e Edge) implementam um método setImmediate() que faz exatamente a mesma funcionalidade, mas não é padrão e indisponível em outros navegadores. Mas é uma função padrão no Node.js.

setInterval()

setInterval é uma função semelhante a setTimeout, com uma diferença: em vez de executar a função de callback uma vez, ela a executará para sempre, no intervalo de tempo específico que você especificar (em milissegundos):

setInterval(() => {
  // executa a cada 2 segundos
}, 2000)

A função acima é executada a cada 2 segundos, a menos que você diga para ela parar, usando clearInterval, passando a ela o id do intervalo que setInterval retornou:

const id = setInterval(() => {
  // executa a cada 2 segundos
}, 2000)
// Mudei de ideia
clearInterval(id)

É comum chamar clearInterval dentro da função de callback setInterval, para permitir que ela determine automaticamente se deve executar novamente ou parar. Por exemplo, este código executa algo a menos que App.somethingIWait tenha o valor chegou:

setTimeout Recursivo

setInterval inicia uma função a cada n milissegundos, sem qualquer consideração sobre quando uma função terminou sua execução.

Se uma função sempre leva a mesma quantidade de tempo, tudo bem.

Talvez a função leve tempos de execução diferentes, dependendo das condições de rede.

E talvez uma execução longa se sobreponha à próxima.

Para evitar isso, você pode agendar um setTimeout recursivo para ser chamado quando a função de retorno de chamada terminar:

const myFunction = () => {
  // faça algo
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

setTimeout e setInterval estão disponíveis no Node.js, através do módulo Timers.

O Node.js também fornece setImmediate(), que é equivalente ao uso de setTimeout(() => {}, 0), usado principalmente para trabalhar com o Loop de Eventos do Node.js.