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, чтобы задать смещение заголовка

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

Метод offset принимает объект, который может содержать свойство

left для задания смещения от левого края или свойство top для сме-

щения от верха страницы. В данном случае мы выбрали свойство left