Таймеры

Последнее обновление: 1.11.2015

Для выполнения действий через определенные промежутки времени в объекте window предусмотрены функции таймеров. Есть два типа таймеров: одни выполняются только один раз, а другие постоянно через промежуток времени.

Функция setTimeout

Для одноразового выполнения действий через промежуток времени предназначена функция setTimeout(). Она может принимать два параметра:

var timerId = setTimeout(someFunction, period)

Параметр period указывает на промежуток, через который будет выполняться функция из параметра someFunction. А в качестве результата функция возвращает id таймера.

function timerFunction() {
	document.write("выполнение функции setTimeout");
}
setTimeout(timerFunction, 3000);

В данном случае через 3 секунды после загрузки страницы произойдет срабатывание функции timerFunction.

Для остановки таймера применяется функция clearTimeout().

function timerFunction() {
	document.write("выполнение функции setTimeout");
}
var timerId = setTimeout(timerFunction, 3000);
clearTimeout(timerId);

Функция setInterval

Функции setInterval() и clearInterval() работают аналогично функциям setTimeout() и clearTimeout() с той лишь разницей, что setInterval() постоянно выполняет определенную функцию через промежуток времени.

Например, напишем небольшую программу для вывода текущего времени:

<!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>

Здесь через каждую секунду (1000 миллисекунд) вызывается функция updateTime(), которая обновляет содержимое поля <div id="time" >, устанавливая в качестве его кода 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);
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850