Представьте, что вы поставили будильник, чтобы он напомнил

вам о домашнем задании, однако в итоге сделали все заранее

и теперь хотите отключить будильник. Для отмены действия

таймера используется функция 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 () {

Print

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-код

Теперь перейдем к JavaScript-коду. Как и прежде, поместите его

в HTML-документ между тегами .

 var leftOffset = 0;

Left offset —

отступ слева

 var moveHeading = function () {

Move heading —

 $("#heading").offset({ left: leftOffset });

подвинуть

заголовок

 leftOffset++;

 if (leftOffset > 200) {

160 Часть II. Продвинутый JavaScript

leftOffset = 0;

}

};

 setInterval(moveHeading, 30);

Открыв наш документ в браузере, вы увидите, как элемент заголовка

плавно сдвигается вправо, пока не пройдет расстояние в 200 пикселей.

Затем он резко вернется на свое место, и все начнется снова. Разберемся,

как это работает.

В строке  мы создали переменную leftOffset (отступ слева),

которой далее воспользуемся для задания позиции заголовка «Привет,

мир!». Ее начальное значение — 0. Это значит, что заголовок начнет свое

движение с левого края страницы.

Далее в строке  мы создали функцию moveHeading, чтобы вызы-

вать ее через setInterval. В коде moveHeading, в строке , мы

используем $("#heading") для поиска элемента с id "heading" (это

элемент h1) и вызываем метод offset, чтобы задать смещение заголовка