Таймеры
Для выполнения действий через определенные промежутки времени в объекте window предусмотрены функции таймеров. Есть два типа таймеров: одни выполняются только один раз, а другие постоянно через промежуток времени.
Функция setTimeout
Для одноразового выполнения действий через промежуток времени предназначена функция setTimeout(). Она может принимать два параметра:
var timerId = setTimeout(someFunction, period)Параметр period указывает на промежуток, через который будет выполняться функция из параметра someFunction. А в качестве результата функция возвращает id таймера.
В данном случае через 3 секунды после загрузки страницы произойдет срабатывание функции timerFunction:
function timerFunction() {
document.write("выполнение функции setTimeout");
}
setTimeout(timerFunction, 3000);Для остановки таймера применяется функция clearTimeout():
function timerFunction() {
document.write("выполнение функции setTimeout");
}
var timerId = setTimeout(timerFunction, 3000);
clearTimeout(timerId);Функция setInterval
Функции setInterval() и clearInterval() работают аналогично функциям setTimeout() и clearTimeout() с той лишь разницей, что setInterval() постоянно выполняет определенную функцию через промежуток времени.
Напишем небольшую программу для вывода текущего времени. Здесь через каждую секунду (1000 миллисекунд) вызывается функция updateTime(), которая обновляет содержимое поля <div id="time" >, устанавливая в качестве его кода html текущее вемя:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="time"></div>
<script>
function updateTime() {
document.getElementById("time").innerHTML = new Date().toTimeString();
}
setInterval(updateTime, 1000);
</script>
</body>
</html>Функция requestAnimationFrame()
Метод 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>
var square = document.getElementById("rect");
var angle = 0;
function rotate() {
angle = (angle + 2)%360;
square.style.transform = "rotate(" + angle + "deg)";
window.requestAnimationFrame(rotate);
}
var id = window.requestAnimationFrame(rotate);
</script>
</body>
</html>В метод window.requestAnimationFrame() передается функция, которая будет вызываться определенное количество раз (обычно 60) в секунду. В данном случае в этот метод передается функция rotate, которая изменяет угол поворота блока на странице и затем обращается опять же к методу window.requestAnimationFrame(rotate).
В качестве возвращаемого результата метод window.requestAnimationFrame() возвращает уникальный id, который может потом использоваться для остановки анимации:
window.cancelAnimationFrame(id);