место в рейтинге
  • 143003
  • 554
  • 56
Нравится блог?
Подписывайтесь!

jQuery Timers plugins

Доброе время суток! Ты занимаешься проектирование пользовательских интерфейсов? И у тебя наконец появились задачи связанные с использованием таймеров? Ты очень не любишь это занятие? Досехпор юзаешь setTimeout и setInterval? Тогда я иду к Вам =)

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

Качаем архив (внутри: библиотека jquery, плагин jquery timers и  три рабочих примера про которые буду рассказывать далее) ссылка

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

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

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

 

  1. $("#example_1").everyTime(1000, function(i) {
  2. $(this).text(i);
  3. });

 

Мы выбрали элемент с идентификатором #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. });

 

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

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

 

  1. $("#example_3").oneTime("30s", function() {
  2. $(this).hide(2500);
  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 на официальном сайте jQuery и пожелать успешной работы.

Успехов!

22 июня 2010, 23:24
1468

Загрузка...

Комментарии

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

Я был удивлён, что в Азербайджане есть Казахский район

Я был удивлён, что в Азербайджане есть Казахский район

Мне как казаху по национальности очень хотелось туда попасть. Оказалось, что климат там намного суровей и люди, говорят, суровые и воинственные. Казах – город на западе Азербайджана...
alidimash
18 янв. 2017 / 21:50
  • 30799
  • 18
Многочасовые очереди, смерти в ЦОНах: почему вопросы об этом ставят парламентариев в тупик?

Многочасовые очереди, смерти в ЦОНах: почему вопросы об этом ставят парламентариев в тупик?

Ожидали ли депутаты Мажилиса всего этого? Как планировали этот процесс регистрации, и обсуждали ли его, прежде чем одним нажатием кнопки принять нормы с такими абсурдными временными рамками?
openqazaqstan
17 янв. 2017 / 14:32
  • 5268
  • 22
Астана глазами алматинских девушек. Как при таких погодных условиях можно выжить?

Астана глазами алматинских девушек. Как при таких погодных условиях можно выжить?

В спальных районах, и в высотных домах сквозь стены слышно завывание ветра. В особенности ночью. Такие звуки, я слышала, пожалуй, только по телевизору, в фильмах про метель.
Naomi_K
20 янв. 2017 / 12:36
Сильное ДТП произошло в Алматы на Тимирязева-Байзакова

Сильное ДТП произошло в Алматы на Тимирязева-Байзакова

NoComment (c) Официальный слоган EuroNews. Катастрофа на алматинской утренней трассе началась с того, что водители «Ниссана» и микровена ожидали сигнала светофора на запад по Тимирязева...
ibestreporter
17 янв. 2017 / 22:52
  • 3943
  • 5
Вейпинг безопасен? Эндрю Холл из США тоже так считал, пока что-то не пошло не так

Вейпинг безопасен? Эндрю Холл из США тоже так считал, пока что-то не пошло не так

Эндрю Холл из США считал, что вейпинг безопасен и усиленно убеждал в этом близких. Но как-то раз что-то пошло не так. Это результат взрыва хипстерского устройства - выбило 7 зубов + ожоги и раны...
Maxambet
17 янв. 2017 / 16:28
  • 4046
  • 52
Это поколение просрет страну. 20-летняя молодежь представляет из себя сказочных эльфов

Это поколение просрет страну. 20-летняя молодежь представляет из себя сказочных эльфов

Смотря в очередные пустые глаза вчерашнего студента, приходящего устраиваться на первую работу страшно становится. Потому что сравниваю с теми же китайскими студентами, которые готовы выгрызать себе мечту.
mbaitykov
18 янв. 2017 / 11:34
Становится хуже, но как-то постепенно. Беднеем, но тоже как-то не разом

Становится хуже, но как-то постепенно. Беднеем, но тоже как-то не разом

Помню, когда я уезжал и Казахстана, тут было довольно прилично, даже не смотря на то, что жить было невыносимо. Но прилично так. Мусора было меньше. Дороги чистили, вони почти не было. Да и в остальном тоже норм.
shootnix
18 янв. 2017 / 12:49
  • 3812
  • 35
Любимый Тайланд. Правящий король называет Паттайю «черным пятном на репутации страны»

Любимый Тайланд. Правящий король называет Паттайю «черным пятном на репутации страны»

Тайланд мы впервые посетили в декабре 2012 года. Полученные эмоции настолько были яркими, что в конце 2015 года мы решили еще разок слетать в Тайланд. Вспоминая Тай, первое о чем я думаю - горячий...
zhainar_d
17 янв. 2017 / 11:11
  • 3873
  • 25
Разрубить сирийский узел. Казахстан как миротворец сделает невозможное?

Разрубить сирийский узел. Казахстан как миротворец сделает невозможное?

Только что в Астане начались межсирийские переговоры. Событие это примечательно не столько содержанием и ожидаемыми результатами, а самим фактом.
openqazaqstan
вчера / 13:35
  • 2928
  • 10