jQuery Timers

    При проектировании интерфейсов пользователя когда-нибудь обязательно встанет задача использования таймеров, и в этой статье я хочу рассказать о замечательном плагине jQuery Timers, который значительно облегчит работу по созданию и применению таймеров в Ваших приложениях.
    jQuery Timers — это высокоуровневая абстракция методов setTimeout и setInterval. Используя jQuery Timers, Вы сможете «прикреплять» таймеры к элементам непосредственно в Вашем коде и использовать еще некоторые возможности.
    Как обычно, сначала посмотрим пример, а потом разберем исходный код.

    Пример и исходный код скачать можно здесь

    image

    Пример №1 — демонстрирует неуправляемый таймер, который просто отсчитывает секунды.
    Пример №2 — таймер от 0 до 15 секунд с возможностью запуска и остановки.
    Пример №3 — «одноразовый» таймер, который выполняет некую функцию по истечении определенного времени.

    Примеры написаны таким образом, чтобы продемонстрировать работу всех трех методов, которые реализует плагин.

    HTML и CSS-коды разбирать не имеет смысла — они слишком просты. Посмотреть их можно в исходнике. Подробнее разберем только js-код.

    Итак, код примера №1:

    1. $("#example_1").everyTime(1000, function(i) {
    2.  $(this).text(i);
    3. });
    * This source code was highlighted with Source Code Highlighter.


    Мы выбрали элемент с идентификатором #example_1 и «прикрепили» к нему таймер, который будет срабатывать каждые 1000 миллисекунд. Соответственно, каждую секунду будет отрабатывать функция, которая вставит в выбранный элемент очередную цифру. В примере мы передали методу только два обязательных аргумента. Есть еще и необязательные, но о них будет рассказано ниже.

    Посмотрим код примера №2:

    1. $("#start").click(function() {
    2.  $("#example_2").everyTime(1000, 'timer2', function(i) {
    3.   $(this).text(i);
    4.  }, 15);
    5. });
    6. $("#stop").click(function() {
    7.  $("#example_2").stopTime('timer2');
    8. });
    * This source code was highlighted with Source Code Highlighter.


    При клике на кнопке с идентификатором #start мы выбираем элемент с идентификатором #example_2 и вызываем уже знакомый нам метод everyTime. Но при этом передаем ему кроме обязательных аргументов, еше два. timer2 — это «метка» соответствующего таймера, а число 15 — количество раз, которое должен отработать таймер до остановки (если конечно раньше его не остановит какое-либо другое событие).
    При клике на кнопке с идентификатором #stop мы снова выбираем элемент с идентификатором #example_2 и вызываем метод stopTime, передавая ему «метку» таймера, который должен быть остановлен.

    И наконец пример №3:

    1. $("#example_3").oneTime("30s", function() {
    2.  $(this).hide(2500);
    3. });
    * This source code was highlighted with Source Code Highlighter.


    «Одноразовый» таймер, который прикреплен к элементу с идентификатором #example_3. Первый аргумент — время, через которое будет вызвана соответствующая функция. Обратите внимание на такую «мелочь» — время может быть указано как в миллисекундах — 30000, так и в человекопонятном виде, просто — 30s.

    А теперь более подробное описание всех трех методов.
    everyTime(interval, [label], fn, [times], [belay])
    в качестве аргументов метода everyTime выступает определение функции (fn: Function), как события, которое будет выполняться через определенные промежутки времени (interval: Integer | String), необходимое количество раз [times = 0: Integer]. Если аргумент times установлен в 0, функция будет вызываться неограниченное количество раз. Аргумент [label = interval: String] — «метка» соответствующего таймера. [belay] — событие, возникающее, если предыдущая итерация по каким-то причинам была не завершена.

    oneTime(interval, [label], fn)
    в качестве аргументов метода oneTime выступает определение функции (fn: Function), которая будет вызвана через некоторый промежуток времени (interval: Integer | String) после того, как элемент будет добавлен в объект jQuery. Аргумент [label = interval: String] — «метка» соответствующего таймера.

    stopTime([label], [fn])
    метод останавливает выполнение всех событий, выполняемых по таймеру, имеющему соответствующую метку [label: Integer | String] и прекращает выполнение функций [fn: Function]. Если ни один из аргументов не передан, метод останавливает все выполняющиеся по таймеру события для элементов объекта jQuery. Если передан только аргумент [fn] — будут остановлены все события, вызывающие эту функцию независимо от метки. Наконец, если передан только аргумент [label] — будут остановлены все события, связанные с этой меткой при инициализации.
    ТюТю
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 36

      +1
      Спасибо, ну хоть что то полезное появилось на хабре за последни два дня =)
        +1
        10 раз подряд нажимаем на Старт.
          +1
          мне кажется код такой простой для того чтоб легче воспринимался пример
          0
          Весьма полезно, в избранное, побольше бы описаний плагинов jQ, спасибо!
          • UFO just landed and posted this here
              0
              Именно при таком пути развития зачастую становится проще написать что-то самому нежели найти этой «чёртов плагин для анимации этой чёртовой загогулины»
              0
              довольно таки полезно…
              спасибо :)
                0
                кстати, в файрфоксе не работает :(
                  0
                  Что именно не работает?
                    0
                    вообще ничего((((
                    подозрительно говорит, что "$ is not defined"
                    хотя jquery подключен… :/
                  +1
                  ммм, а почему просто setTimeout и setInterval не использовать? по сути поменялось только написание и все.
                  было setTimeout, стало everyTime
                  :/
                    0
                    мне лично больше нравится jQuery стиль — несколько иной подход
                      –1
                      По крайней мере экономится одна локальная переменная для объекта, который надо менять.
                        +1
                        а? чо? где экономится?
                          +1
                          Без Timer придётся делать так:
                          var temp = $('#element');
                          var id=setInterval(function(){temp.html(123);}, 1000);

                          temp — та самая лишняя локальная переменная. А если $('#element') будет из DOM удалён, то надо ещё и позаботиться о проверке этого случая.
                            +1
                            Что мешает не выделять отдельную локальную переменную? Запихнуть ее прямо в анонимную функцию?
                              0
                              Можно, но что мы будем делать, если объект, на который ссылаемся, перестанет существовать?
                                0
                                Мне сложно представить такое стечение обстоятельств. Ибо насколько я знаю — он будет существовать до тех пор пока существует таймер. Даже если его убрать из дом-дерева.
                                  0
                                  но так таймер его и будет вечно опрашивать. А представьте, что Вы постоянно создаёте элементы, вешаете на них таймер, через некоторое время элементы удаляете. Если специально не глушить таймеры — а для этого надо систему учёта установленных таймеров, — то будут лишние изменения несществующего элемента. В случае же использования Timer думать об этом не надо.
                        +1
                        Так таймер приаттачивается к конкретному элементу, или группе, в зависимости от селектора. Не нужно заморачиваться, искать элементы (и лишние обработчики писать для setInterval), текущий элемент в this. И код чище, понятнее и функциональней, имхо.
                          0
                          да, в этом его главный плюс
                        0
                        Недавно заменил код в проекте на Timers. Стало удобнее.

                        Вот тут находится сайт автора.
                        Порадовала методика лицензирования: «This plugin is licenced with the WTFPL. In short, do whatever the fuck you want with it.»
                          0
                          «прошло 3 секунд» — это что за смесь французского с нижегородским?
                            0
                            %)) Гениальное словосочетание
                            0
                            Отличный плагин, я думаю он может решить многие «мозголомания» программеров.
                            Спасибо.
                              +1
                              примерно такие вещи я пытаюсь искоренять у своих подчиненных. Что называется сломанный мозг становится гораздо более гибким :)
                              0
                              Господа, я вижу нечто странное. Только один комментарий имеет положительную оценку, подавляющее число — почти все — отрицательные. Как это может быть? Какой-то ненавистник jQuery решила всех проминусовать?
                                0
                                Ничего, это дело поправимое ;)
                                  +1
                                  джейкуерифоб завёлся :)
                                  +1
                                  Спасибо, очень полезно, уверен пригодится!
                                    0
                                    Давно искал, такую штуку для jq. Все таки с таймером без доп. помощи довольно моторное дело работать? теперь жизнь будет легче.
                                    Только еще вопрос, как по производительности? Обычно таймер довольно серьезно напрягает ресурсы.
                                    • UFO just landed and posted this here
                                        0
                                        Спасибо отличный плагин
                                          0
                                          Что бы обнулить счетчик:

                                          function wait() {
                                          	$(document).everyTime(5000, 'timer', function() {
                                          		console.log('5 sec gone');
                                          	});			
                                          }
                                          $('body').click(function() {
                                          	$(document).stopTime('timer');
                                          	console.log('Stop, clear time, wait 5 sec');
                                          	wait();	
                                          });
                                          
                                            0
                                            Вебсайт автора умер, выложил исходный код библиотеки — github.com/zhil/jquery.timers (он под открытой лицензией — WTFPL)

                                            Only users with full accounts can post comments. Log in, please.