При проектировании интерфейсов пользователя когда-нибудь обязательно встанет задача использования таймеров, и в этой статье я хочу рассказать о замечательном плагине jQuery Timers, который значительно облегчит работу по созданию и применению таймеров в Ваших приложениях.
jQuery Timers — это высокоуровневая абстракция методов setTimeout и setInterval. Используя jQuery Timers, Вы сможете «прикреплять» таймеры к элементам непосредственно в Вашем коде и использовать еще некоторые возможности.
Как обычно, сначала посмотрим пример, а потом разберем исходный код.
Пример и исходный код скачать можно здесь
Пример №1 — демонстрирует неуправляемый таймер, который просто отсчитывает секунды.
Пример №2 — таймер от 0 до 15 секунд с возможностью запуска и остановки.
Пример №3 — «одноразовый» таймер, который выполняет некую функцию по истечении определенного времени.
Примеры написаны таким образом, чтобы продемонстрировать работу всех трех методов, которые реализует плагин.
HTML и CSS-коды разбирать не имеет смысла — они слишком просты. Посмотреть их можно в исходнике. Подробнее разберем только js-код.
Итак, код примера №1:
Мы выбрали элемент с идентификатором #example_1 и «прикрепили» к нему таймер, который будет срабатывать каждые 1000 миллисекунд. Соответственно, каждую секунду будет отрабатывать функция, которая вставит в выбранный элемент очередную цифру. В примере мы передали методу только два обязательных аргумента. Есть еще и необязательные, но о них будет рассказано ниже.
Посмотрим код примера №2:
При клике на кнопке с идентификатором #start мы выбираем элемент с идентификатором #example_2 и вызываем уже знакомый нам метод everyTime. Но при этом передаем ему кроме обязательных аргументов, еше два. timer2 — это «метка» соответствующего таймера, а число 15 — количество раз, которое должен отработать таймер до остановки (если конечно раньше его не остановит какое-либо другое событие).
При клике на кнопке с идентификатором #stop мы снова выбираем элемент с идентификатором #example_2 и вызываем метод stopTime, передавая ему «метку» таймера, который должен быть остановлен.
И наконец пример №3:
«Одноразовый» таймер, который прикреплен к элементу с идентификатором #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] — будут остановлены все события, связанные с этой меткой при инициализации.
ТюТю
jQuery Timers — это высокоуровневая абстракция методов setTimeout и setInterval. Используя jQuery Timers, Вы сможете «прикреплять» таймеры к элементам непосредственно в Вашем коде и использовать еще некоторые возможности.
Как обычно, сначала посмотрим пример, а потом разберем исходный код.
Пример и исходный код скачать можно здесь
Пример №1 — демонстрирует неуправляемый таймер, который просто отсчитывает секунды.
Пример №2 — таймер от 0 до 15 секунд с возможностью запуска и остановки.
Пример №3 — «одноразовый» таймер, который выполняет некую функцию по истечении определенного времени.
Примеры написаны таким образом, чтобы продемонстрировать работу всех трех методов, которые реализует плагин.
HTML и CSS-коды разбирать не имеет смысла — они слишком просты. Посмотреть их можно в исходнике. Подробнее разберем только js-код.
Итак, код примера №1:
- $("#example_1").everyTime(1000, function(i) {
- $(this).text(i);
- });
* This source code was highlighted with Source Code Highlighter.
Мы выбрали элемент с идентификатором #example_1 и «прикрепили» к нему таймер, который будет срабатывать каждые 1000 миллисекунд. Соответственно, каждую секунду будет отрабатывать функция, которая вставит в выбранный элемент очередную цифру. В примере мы передали методу только два обязательных аргумента. Есть еще и необязательные, но о них будет рассказано ниже.
Посмотрим код примера №2:
- $("#start").click(function() {
- $("#example_2").everyTime(1000, 'timer2', function(i) {
- $(this).text(i);
- }, 15);
- });
- $("#stop").click(function() {
- $("#example_2").stopTime('timer2');
- });
* This source code was highlighted with Source Code Highlighter.
При клике на кнопке с идентификатором #start мы выбираем элемент с идентификатором #example_2 и вызываем уже знакомый нам метод everyTime. Но при этом передаем ему кроме обязательных аргументов, еше два. timer2 — это «метка» соответствующего таймера, а число 15 — количество раз, которое должен отработать таймер до остановки (если конечно раньше его не остановит какое-либо другое событие).
При клике на кнопке с идентификатором #stop мы снова выбираем элемент с идентификатором #example_2 и вызываем метод stopTime, передавая ему «метку» таймера, который должен быть остановлен.
И наконец пример №3:
- $("#example_3").oneTime("30s", function() {
- $(this).hide(2500);
- });
* 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] — будут остановлены все события, связанные с этой меткой при инициализации.
ТюТю