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