Multi
Мультипликация
Естественным продолжением идеи замещения значения атрибута src в контейнере IMG является мультипликация, т.е. последовательное изменение значения этого атрибута во времени. Для реализации мультипликации привлекают метод объекта window - setTimeout().
Собственно существует два способа запуска мультипликации:
Наиболее популярный - setTimeout() при onLoad().
Событие onLoad()
Событие onLoad() наступает в момент окончания загрузки документа браузером. Обработчик события указывается в контейнере BODY:
...
<body onLoad="JavaScript_code">
...
В нашем случае при загрузке документа должен начать выполняться цикл изменения картинки:
function movie()
{
eval("document.images[0].src='../images/jsi/clock"+i+".gif';");
i++;if(i>6) i=0;
setTimeout("movie();",500);
}
...
<body onLoad="movie();">
...
В примере используется бесконечный цикл, хотя можно реализовать и конечное число подмен:
function movie()
{
eval("document.images[0].src='../images/jsi/clock"+i+".gif';");
i++;
if(i<7)
{setTimeout("movie();",500);}
}
...
<body onLoad="movie();">
...
В обоих примерах следует обратить внимание на использование метода setTimeout(). На первый взгляд - это просто рекурсия. Но, вообще говоря, все несколько сложнее. JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнения скриптов следующим образом:
После окончания срока задержки исполнения все повторяется снова. В первом примере (бесконечное повторение) функция порождает саму себя и, тем самым, поддерживает непрерывность своего выполнения. Во втором примере (конечное число итераций) после девяти повторов функция не порождается. Это приводит к завершению процесса отображения новых картинок.
Запуск и останов мультипликации
Перманентная мультипликация может быть достигнута и другими средствами, например, многокадровыми графическими файлами. Однако, движение на странице не всегда благо. Часто возникает желание реализовать запуск и останов движения по требованию пользователя. Удовлетворим это желание, используя предыдущие примеры(Запустить или остановить мультипликацию):
var flag1=0;
function movie()
{
if(flag1==0)
{
eval("document.images[0].src='../images/jsi/clock"+i+".gif';");
i++;if(i>6) i=0;
}
setTimeout("movie();",500);
}
...
<body onLoad="movie();">
...
<form>
<input type=button value="Start/Stop" onClick="if(flag1==0) flag1=1; else flag1=0;">
</form>
В данном случае мы просто обходим изменение картинки, но при этом не прекращаем порождение потока. Если мы поместим setTimeout() внутрь конструкции if(), то после нажатия на кнопку Start/Stop поток порождаться не будет и запустить движение будет нельзя.
Существует еще один способ решения проблемы останова и старта мультипликации. Он основан на применении метода clearTimeout(). Внешне все выглядит по-прежнему, но работает совсем по-другому:
var flag1=0;
var id1;
function movie()
{
eval("document.images[0].src='../images/jsi/clock"+i+".gif';");
i++;if(i>6) i=0;
id1 = setTimeout("movie();",500);
}
...
<body onLoad="movie();">
...
<form>
<input type=button value="Start/Stop"
onClick="if(flag1==0) { id1=setTimeout('movie();',500); flag1=1;} else {clearTimeout(id1); flag1=0;};">
</form>
Обращают на себя внимание два изменения. Во-первых, объявлен и используется идентификатор потока (id1), во-вторых, применяется метод clearTimeout(), которому, собственно, идентификатор потока и передается в качестве аргумента. Достаточно "убить" поток, чтобы остановить воспроизведение функции movie().
