ТаблицейБлоками.Приложение Д: javascript метод setTimeout setInterval справочник |
Последняя модификация: 10.08.2014 г
Страница загружена с адреса: http://webdesign.site3k.ru/conjuncture/append/d/leter.html
Отложенное выполнение и выполнение с заданным интервалом
Функции setInterval и setTimeout имеют сходное значение из-за чего, их часто используют не по назначению. Вот, например фрагмент таймера, в котором вместо setInterval используется setTimeout:
<script>
<!--
function showTime()
{
... Здесь код вырезан для компактности
setTimeout('showTime()', 1000);
}
// -->
</script>
Что мы здесь видим? Функция showTime постоянно вызывает сама себя, создавая, таким образом, бесконечный цикл. Такое поведение не является правильным и, хотя, оно может работать так, как задумывал автор, в старых версиях Netscape приводила к переполнению стека и аварийному выходу из программы. Более уместным здесь было бы применение setInterval и, сейчас станет ясно почему.
Отложенное выполнение и метод setTimeout
Метод setTimeout выполняет выражение по истечении установленного количества миллисекунд.
Синтаксис:
timeoutID=setTimeout(expression, msec)
timeoutID идентификатор, который используется только для окончания выполнения, используя метод clearTimeout.
expression строковое выражение или свойство существующего объекта.
msec числовое значение, числовой ряд или свойство существующего объекта в миллисекундах.
Выражение выполняется однократно и для его повторного выполнения требуется очередной вызов метода. Если в связи с неким событием уже назначенный вызов метода требуется отменить, используется метод
clearTimeout(timeoutID)
где timeoutID – идентификатор, назначенный данному вызову.
Метод setTimeout разрабатывался Нетскейпом как способ многократного выполнения функций с заданным интервалом времени, но в самом Нетскейпе, в свое время, была допущена ошибка и, через некоторое количество вызовов, программу клинило. Обнаружив эту ошибку, авторы ее исправили, но абсурдность метода никуда не делась. Фактически, метод setTimeout является вызовом функции из этой же функции. Сравните:
function showTime()
{
... Здесь код вырезан для компактности
setTimeout('showTime()', 1000);
}
и
function showTime()
{
... Здесь код вырезан для компактности
showTime();
}
Разницы нет. Более правильным программистским решением была бы организация нормального цикла:
function showTime()
{
for (условие)
{
... Здесь код вырезан для компактности
}
}
Или так:
function showTime()
{
... Здесь код вырезан для компактности
}
for (условие)
{
showTime();
}
И этот подход реализован в JavaScript 1.3 методом setInterval. Таким образом, метод setTimeout утратил первоначальное значение и может применяться теперь только для совместимости со старыми браузерами (каких уже просто нет), либо совершенно с иной целью – для однократного выполнения выражения по истечении установленного количества миллисекунд (а не циклического вызова). Например, метод можно вызвать через 10 тысяч миллисекунд после открытия доступа к некому ресурсу, чтобы предупредить об истечении времени доступа. Или через тысячу миллисекунд после открытия страницы, чтобы вывести некое сообщение.
Выполнение с заданным интервалом и метод setInterval
Метод setInterval циклически выполняет выражение по истечении установленного количества миллисекунд.
Синтаксис:
timeoutID=setInterval(expression, msec)
timeoutID идентификатор, который используется только для окончания выполнения, используя метод clearInterval.
expression строковое выражение или свойство существующего объекта.
msec числовое значение, числовой ряд или свойство существующего объекта в миллисекундах.
Выражение выполняется непрерывно, пока не будет вызван метод
clearInterval(timeoutID)
где timeoutID – идентификатор, назначенный данному выражению.
В результате использования метода setInterval, рекурсивная функция часов принимает иной, более логичный вид:
function showTime()
{
... Здесь код вырезан для компактности
}
setInterval('showTime()', 1000);
То есть, цикл объявлен вне функции и, функция больше не вызывает сама себя, а это – наиболее правильное решение.
Пример мультяшки с использованием setInterval:
<HTML lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Крутая анимация!</title>
<SCRIPT LANGUAGE="JavaScript"><!--
counter=1;
MaxNum=2; // Максимальное число рисунков
function ChengeImage()
{
counter++;
if(counter>(MaxNum)) {counter=1;} // смена номера рисунка
// вариант 1, рассчитанный на то, что рисунки названы номерами (1.gif, 2.gif и так далее)
image1.src='img/'+ counter+'.gif';
// Другой вариант - значения определяются для каждого номера (рисунки могут иметь любые названия)
//if (counter==1) {image1.src='img/1.gif';}
//if (counter==2) {image1.src='img/2.gif';}
}
//--></SCRIPT>
</head>
<BODY onLoad="setInterval('ChengeImage()', 1000);" bgcolor=White TEXT=Black>
<img id=image1 src="img/1.gif">
</body>
</html>
