Запуск и остановка мультипликации

Обработчик события onLoad

Мультипликация

Естественным продолжением идеи замещения значения атрибута SRC в контейнере IMG является мультипликация, т.е. последовательное изменение значения этого атрибута во времени. Для реализации мультипликации используют метод setTimeout() объекта window (см. лекцию "Программируем свойства окна браузера").

Существует два способа запуска мультипликации: по окончании загрузки страницы ( onLoad ) и при действиях пользователя ( onClick, onChange и т.д.). Наиболее популярный - первый, а именно использование onLoad() и setTimeout().

Событие Load наступает в момент окончания загрузки документа браузером. Обработчик данного события ( onLoad ) указывается в контейнере BODY:

Рассмотрим сначала пример, в котором при загрузке документа начинает выполняться бесконечный цикл изменения картинки:

<SCRIPT>var i=0;function movie(){ document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) i=0; setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><IMG NAME=i></BODY>

Пример 7.1. Бесконечная мультипликация (html, txt)

Можно реализовать и конечное число циклов мультипликации, скажем 5:

<SCRIPT>var i=0, n=5; // число цикловfunction movie(){ document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) { i=0; n--; } if(n>0) setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><IMG NAME=i></BODY>

Пример 7.2. Мультипликация с числом циклов n=5 (html, txt)

В обоих примерах следует обратить внимание на использование методаsetTimeout(). На первый взгляд, это просто рекурсия. Но в действительности все несколько сложнее. JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнение скриптов следующим образом:

скрипт movie() получает управление от обработчика события onLoad ;
заменяет картинку;
порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;
текущий скрипт movie() уничтожается JavaScript-интерпретатором.

После окончания срока задержки исполнения все повторяется. В первом примере (бесконечное повторение) функция порождает саму себя и, тем самым, поддерживает непрерывность своего выполнения. Во втором примере (конечное число итераций) после нескольких повторов функция не порождается. Это приводит к завершению процесса отображения новых картинок.

Постоянная мультипликация может быть достигнута и другими средствами, например многокадровыми графическими файлами. Однако движение на странице - не всегда благо. Часто возникает желание реализовать запуск и остановить движения по требованию пользователя. Удовлетворим это желание, модифицировав пример с бесконечной мультипликацией:

<SCRIPT>var i=0, flag=true;function movie(){ if(flag) { document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) i=0; } setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><FORM><INPUT TYPE=button VALUE="Start/Stop" onClick="flag = !flag;"></FORM><IMG NAME=i></BODY>

Пример 7.3. Остановка/запуск мультипликации (поток генерируется постоянно) (html, txt)

Мы ввели булевский flag и меняем изображение на странице, только если он принимает значение true. Нажатие на кнопку меняет значение флага на его отрицание.

Обратите внимание: когда flag имеет значение false, мы просто обходим изменение картинки, но не прекращаем порождение потока. Если бы мы поместили setTimeout() внутрь конструкции if(), то после нажатия на кнопку поток перестал бы порождаться, и запустить мультипликацию заново стало бы нельзя. Однако постоянное генерирование потока - это некоторая растрата ресурсов (памяти, процессора). Нельзя ли сделать оптимальнее? Можно. Этот способ основан на применении метода clearTimeout():

<SCRIPT>var i=0, flag=true, m=null;function movie(){ if(flag) { document.i.src='images/crou00'+i+'.gif'; i++; if(i>4) i=0; } m = setTimeout('movie();',500);}</SCRIPT><BODY onLoad="movie();"><IMG NAME=i><FORM><INPUT TYPE=button VALUE="Start/Stop" onClick="flag = !flag; if(flag) movie(); else clearTimeout(m);"></FORM></BODY>

Пример 7.4. Остановка/запуск мультипликации (поток приостанавливается) (html,txt)

Как видите, достаточно ввести идентификатор потока m и сохранять в нем ссылку на поток при вызове setTimeout(). Тогда в случае необходимости (при нажатии пользователем кнопки) мы можем отменить запланированное выполнение movie() (которое произошло бы через 500 миллисекунд), вызвав метод clearTimeout(m).