Atualizado: 21/06/2025

Este conteúdo é original e não foi gerado por inteligência artificial.

Temporizadores em JavaScript

Para executar ações após determinados intervalos de tempo, o objeto window fornece funções de temporizadores. Existem dois tipos de temporizadores: um executa a ação apenas uma vez, e o outro a executa continuamente após um intervalo de tempo.

Função setTimeout

Para executar ações uma única vez após um intervalo de tempo, utiliza-se a função setTimeout(). Ela pode receber dois parâmetros:

const timerId = setTimeout(someFunction, period);

O parâmetro period indica o intervalo em milissegundos após o qual a função especificada por someFunction será executada. A função retorna o id do temporizador.

function printMessage() {
  console.log("Hello Programício!");
}
setTimeout(printMessage, 5000);

No exemplo acima, a função printMessage será executada após 5 segundos.

Para parar o temporizador, usa-se a função clearTimeout(), passando o id do temporizador:

Função setInterval

As funções setInterval() e clearInterval() funcionam de maneira similar a setTimeout() e clearTimeout(), com a diferença de que setInterval() executa a função continuamente após o intervalo de tempo especificado.

Por exemplo, uma pequena aplicação para exibir a hora atual:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <div id="timer"></div>
    <script>
      const timer = document.getElementById("timer");
      function updateTime() {
        const now = new Date();
        timer.textContent = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
      }
      setInterval(updateTime, 1000);
    </script>
  </body>
</html>

Aqui, a função updateTime() é chamada a cada segundo (1000 milissegundos) para atualizar o conteúdo do elemento <div id="timer">, definindo como texto a hora atual.

requestAnimationFrame()

O método requestAnimationFrame() funciona de maneira similar a setInterval(), mas é mais adequado para animações e trabalhos gráficos, possuindo otimizações que melhoram seu desempenho.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <style>
      #rect {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #50c878;
      }
    </style>
  </head>
  <body>
    <div id="rect"></div>
    <script>
      const square = document.getElementById("rect");
      let offset = 0;
      let step = 1;
      function moveRect() {
        if (offset >= 600) step = -1;
        if (offset <= 0) step = 1;
        offset += step;
        square.style.marginLeft = offset + "px";
        window.requestAnimationFrame(moveRect);
      }
      window.requestAnimationFrame(moveRect);
    </script>
  </body>
</html>

No método window.requestAnimationFrame(), passa-se uma função que será chamada um número específico de vezes (geralmente 60) por segundo. Neste caso, a função moveRect é passada, que altera a posição do bloco na página e, em seguida, chama novamente o método window.requestAnimationFrame(moveRect).

O método window.requestAnimationFrame() retorna um id único que pode ser usado para parar a animação:

// Obtendo o id
const id = window.requestAnimationFrame(moveRect);

// Parando a animação
window.cancelAnimationFrame(id);
Política de Privacidade

Copyright © www.programicio.com Todos os direitos reservados

É proibida a reprodução do conteúdo desta página sem autorização prévia do autor.

Contato: programicio@gmail.com