Temporizatoare
Pentru efectuarea acțiunilor la intervale de timp stabilite, obiectul window oferă funcții de temporizare. Există două tipuri de temporizatoare: unele se execută doar o singură dată, iar altele continuu, la intervale de timp.
Funcția setTimeout
Pentru executarea unică a acțiunilor după un interval de timp, este destinată funcția setTimeout(). Aceasta poate accepta doi parametri:
const timerId = setTimeout(someFunction, period)Parametrul period indică perioada în milisecunde, după care va fi executată funcția din parametrul someFunction. Ca rezultat, funcția returnează id-ul temporizatorului.
function printMessage() { console.log("Hello FDC.COM");}
setTimeout(printMessage, 5000);În acest caz, după 5 secunde de la încărcarea paginii, va fi activată funcția printMessage.
Pentru oprirea temporizatorului se utilizează funcția clearTimeout(), în care se transmite id-ul temporizatorului:
function printMessage() { console.log("Hello FDC.COM");}
const timerId = setTimeout(printMessage, 5000);
clearTimeout(timerId);Funcția setInterval
Funcțiile setInterval() și clearInterval() funcționează similar cu funcțiile setTimeout() și clearTimeout(), cu diferența că setInterval() execută continuu o anumită funcție la intervale de timp.
De exemplu, scriem un mic program pentru afișarea orei curente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</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>Aici, la fiecare secundă (1000 milisecunde), este apelată funcția updateTime(), care actualizează conținutul câmpului <div id="timer">, setând ca text ora curentă.
requestAnimationFrame()
Metoda requestAnimationFrame() acționează similar cu setInterval(), cu excepția că este mai orientată spre animații, lucrul cu grafica și are o serie de optimizări care îmbunătățesc performanța sa.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>În metoda window.requestAnimationFrame() se transmite o funcție care va fi apelată de un număr stabilit de ori (de obicei 60) pe secundă.
În acest caz, în această metodă este transmisă funcția moveRect, care schimbă unghiul de rotație al blocului pe pagină și apoi apelează din nou metoda window.requestAnimationFrame(moveRect).
Ca rezultat al returnării, metoda window.requestAnimationFrame() returnează un id unic, care poate fi folosit ulterior pentru oprirea animației:
// obținem id
const id = window.requestAnimationFrame(moveRect);
// oprim animația
window.cancelAnimationFrame(id);