Введение в JavaScript

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


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

var flag1=0; function movie() { if(flag1==0) { eval("document.images[0].src='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='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() достаточно "убить" поток.



Содержание раздела