Web-инжиниринг

       

Multi


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

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

Собственно существует два способа запуска мультипликации:

  • onLoad()
  • onClick(), onChange(), ...
  • Наиболее популярный - 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 разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнения скриптов следующим образом:

  • Скрипт получает управление при событии onLoad().
  • Заменяет картинку.
  • Порождает новый скрипт и откладывает его исполнение на 500 миллисекунд.
  • Текущий скрипт уничтожается 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().


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