Для выполнения действий через определенные промежутки времени в объекте window предусмотрены функции таймеров. Есть два типа таймеров: одни выполняются только один раз, а другие постоянно через промежуток времени.
Для одноразового выполнения действий через промежуток времени предназначена функция setTimeout(). Она может принимать два параметра:
const timerId = setTimeout(someFunction, period)
Параметр period указывает на период в миллисекундах, через который будет выполняться функция из параметра someFunction.
А в качестве результата функция возвращает id таймера.
function printMessage() { console.log("Hello METANIT.COM");}
setTimeout(printMessage, 5000);
В данном случае через 5 секунд после загрузки страницы произойдет срабатывание функции printMessage.
Для остановки таймера применяется функция clearTimeout(), в которую передается id таймера:
function printMessage() { console.log("Hello METANIT.COM");}
const timerId = setTimeout(printMessage, 5000);
clearTimeout(timerId);
Функции setInterval() и clearInterval() работают аналогично функциям
setTimeout() и clearTimeout() с той лишь разницей, что setInterval() постоянно выполняет
определенную функцию через промежуток времени.
Например, напишем небольшую программу для вывода текущего времени:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.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>
Здесь через каждую секунду (1000 миллисекунд) вызывается функция updateTime(), которая обновляет содержимое поля
<div id="timer" >, устанавливая в качестве его текста текущее вемя.
Метод requestAnimationFrame() действует аналогично setInterval() за тем исключением,
что он больше заточен под анимации, работу с графикой и имеет ряд оптимизаций, которые улучшают его производительность.
<!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>
В метод window.requestAnimationFrame() передается функция, которая будет вызываться определенное количество раз (обычно 60) в секунду.
В данном случае в этот метод передается функция moveRect, которая изменяет угол поворота блока на странице и затем обращается опять же к методу
window.requestAnimationFrame(moveRect).
В качестве возвращаемого результата метод window.requestAnimationFrame() возвращает уникальный id, который может потом использоваться для
остановки анимации:
// получаем id const id = window.requestAnimationFrame(moveRect); // останавливаем анимацию window.cancelAnimationFrame(id);