---
title: "jQuery Timers plugins"
description: "Доброе время суток! Ты занимаешься проектирование пользовательских интерфейсов? И у тебя наконец по..."
author: "web"
published: "2010-06-22T11:24:19+00:00"
modified: "2010-06-22T11:24:19+00:00"
locale: "ru"
canonical_url: "https://yvision.kz/post/jquery-timers-plugins-51555"
markdown_url: "https://yvision.kz/post/jquery-timers-plugins-51555/markdown"
site_name: "Yvision.kz"
---

# jQuery Timers plugins

> Доброе время суток! Ты занимаешься проектирование пользовательских интерфейсов? И у тебя наконец по...

![jQuery Timers plugins](http://storage.yvision.kz/images/user/web/J3GcqEbRbCj3K6klXTNeCsJP78k8x6.png)

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

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

Качаем архив (внутри: библиотека jquery, плагин jquery timers и три рабочих примера про которые буду рассказывать далее) [ссылка](http://files.gw.kz/8capcpjyny.html)

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

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

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

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

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

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

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

``` $("#example_3").oneTime("30s", function() { $(this).hide(2500);}); ```

«Одноразовый» таймер, который прикреплен к элементу с идентификатором #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](http://plugins.jquery.com/project/timers) на официальном сайте jQuery и пожелать успешной работы.

**Успехов!**

---

Source: [https://yvision.kz/post/jquery-timers-plugins-51555](https://yvision.kz/post/jquery-timers-plugins-51555)