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