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