не произойдет, однако через три секунды сработает функция timeUp,
открыв диалог alert.
Обратите внимание — вызов setTimeout вернул число 1. Это значе-
ние называют идентификатором (ID) таймера, который обозначает этот
конкретный таймер (отложенный вызов функции). Заметим, что возвра-
щаемое setTimeout значение может быть любым числом, ведь это про-
сто идентификатор. Вызовите setTimeout снова, и он вернет другой ID
таймера:
setTimeout(timeUp, 5000);
2
Полученный ID можно передать функции clearTimeout, чтобы Clear timeout —
отменить этот конкретный таймер. Об этом я расскажу ниже.
отменить
задержку
157
Отмена действия таймера
После задания отложенного вызова функции с помощью setTimeout
может выясниться, что вызывать эту функцию больше не нужно.
Представьте, что вы поставили будильник, чтобы он напомнил
вам о домашнем задании, однако в итоге сделали все заранее
и теперь хотите отключить будильник. Для отмены действия
таймера используется функция clearTimeout c ID таймера
(полученным ранее от setTimeout) в качестве аргумента.
Предположим, вы установили таймер «сделай домашку» следую-
щим образом:
Do homework
var doHomeworkAlarm = function () {
alarm — здесь
alert("Эй! Пора делать домашку!");
будильник
};
«сделай
домашку»
var timeoutId = setTimeout(doHomeworkAlarm, 60000);
Функция doHomeworkAlarm создает диалог alert, напомина-
ющий о домашке. Вызов setTimeout(doHomeworkAlarm, 60000)
сообщает JavaScript, что функцию doHomeworkAlarm нужно вызвать
через 60 000 миллисекунд (то есть 60 секунд). В строке мы вызвали
setTimeout и сохранили ID таймера в новой переменной timeoutID.
Теперь, чтобы отменить действие таймера, достаточно передать его ID
функции clearTimeout, вот так:
clearTimeout(timeoutId);
Теперь setTimeout не будет вызывать функцию doHomeworkAlarm.
Многократный запуск кода и setInterval
Функция setInterval похожа на setTimeout, однако она вызывает
Set interval —
переданную ей функцию повторно через определенные промежутки
задать
( интервалы) времени. Скажем, если вы хотите с помощью JavaScript
интервал
обновлять показания часов, используйте setInterval, чтобы функ-
ция обновления вызывалась раз в секунду. SetInterval принимает два
аргумента: функцию и интервал времени в миллисекундах, как пока-
зано на рис. 10.2.
158 Часть II. Продвинутый JavaScript
Функция, которую нужно вызывать
каждые interval миллисекунд
setInterval(func, interval)
Сколько миллисекунд
должно пройти между вызовами
Рис. 10.2. Аргументы setInterval
Например, так можно раз в секунду выводить в консоль сообщение:
var counter = 1;
Counter —
счетчик
var printMessage = function () {
console.log("Ты смотришь в консоль уже " + counter + " сек");
message —
counter++;
напечатать
};
сообщение
var intervalId = setInterval(printMessage, 1000);
Ты смотришь в консоль уже 1 сек
Ты смотришь в консоль уже 2 сек
Ты смотришь в консоль уже 3 сек
Ты смотришь в консоль уже 4 сек
Ты смотришь в консоль уже 5 сек
Ты смотришь в консоль уже 6 сек
clearInterval(intervalId);
В строке мы создали новую переменную
counter и присвоили ей значение 1. С помощью
этой переменной мы будем вести учет времени
(в секундах).
В строке мы создали функцию printMessage,
которая выполняет две задачи. Во-первых, она
печатает сообщение о том, сколько секунд вы уже
смотрите в консоль. Во-вторых, далее в строке
она увеличивает переменную counter.
Затем, в строке , мы вызвали setInterval,
передав ей функцию printMessage и число 1000,
что означает «вызывай printMessage каждые
1000 миллисекунд». Так же как setTimeout воз-
вращает ID таймера, setInterval возвращает ID
интервала, который мы сохранили в переменной intervalId. Далее
этот ID можно использовать для отмены периодического вызова функ-
ции printMessage — что мы и сделали в строке с помощью функции
clearInterval.
10. Интерактивное программирование 159
ПОПР ОБУ ЙТЕ !
Измените предыдущий пример так, чтобы сообщение выводилось каждые
пять секунд, а не раз в секунду.
Анимация элементов с помощью setInterval
Отложенный вызов через setInterval можно использовать для анимации
элементов в браузере. По сути, для этого нужно создать функцию, кото-
рая слегка сдвигает элемент, и затем передать ее setInterval, установив
небольшое время повтора. При условии, что каждый сдвиг будет достаточно
мал и величина интервала тоже, анимация получится очень плавной.
Давайте анимируем положение фрагмента текста в HTML-
Interactive —
документе, двигая его по горизонтали. Создайте файл interactive.html
интерактивный
с таким содержимым:
Привет, мир!
Теперь перейдем к JavaScript-коду. Как и прежде, поместите его
в HTML-документ между тегами