346
 

jQuery Timers - плагин для работы с таймерами в jQuery

jQuery Timers - это плагин который упрощает работу с JavaScript таймерами, добавляя три новые функции everyTime(), oneTime() и stopTime(). Чем же эти три функции удобнее, чем привычные нам стандартные setTimeout() и setInterval()? Во первых, в jQuery используются цепочки вызовов функций:

$('.controlled-interval', demos).find('.start').css("cursor", "pointer").click(function(){});

Используя jQuery Timers, вы сможете добавлять таймеры используя такую же модель вызова функций. Например:

$('myElement').find('ul').everyTime(1000, 'controlled', function() {
	alert("Таймер");
});

Во вторых, при использовании setTimout() и setInterval(), используется глобальная область видимости, то есть, указатель this ссылается на объект window. В случае с использованием одной из функций плагина jQuery Timers, указатель this ссылается на элемент, которому был присвоен таймер.

$("#myElement").oneTime(2000, function() {
	$(this).html("See?");
});

Теперь о том, как пользоваться этими функциями.


everyTime()

everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer], [belay = false : Boolean])

everyTime() будет выполнять функцию (fn) через указанный интервал (interval) определенное количество раз (times) с возможностью "замораживать" выполнение, если предыдущая итерация не завершилась (belay). Для управления таймером нужно установить парамет label. Также, интервал может быть указан не только как число в миллисекундах, но и как строка, например "3s" установит значение интервала в 3000 миллисекунд. Пример:

$(this).parents("div").find('ul').everyTime(1000, 'controlled', function() {
	$(this).append("New One");
});


oneTime()

oneTime(interval : Integer | String, [label = interval : String], fn : Function);

oneTime() вызовет функцию (fn) через определенное время (interval) после добавления таймера к элементу. Также элементу можно присваивать ярлык (label).

$('#myElement').oneTime(5000, "soon", function() {
	$(this).html("I'm unstoppable");
});


stopTime()

stopTime([label : Integer | String], [fn : Function]);

stopTime() останавливает таймер, имеющий ярлык (label) и функцию (fn). Оба этих параметра необязательны, и если ни один из них не указан, то функция прекратит выполнение всех таймеров. Если указан только ярлык (label), то остановится выполнение таймера с этим ярлыком. Если же указана только функция, то остановится выполнение всех таймеров, для которых присвоена эта функция.

$('#myElement').find('ul').stopTime('controlled');

Плагин распространяется под лицензией WTFPL, само название которой говорит о полнейшей свободе этого программного обеспечения.

Добавить в закладки:

Комментарии на “jQuery Timers - плагин для работы с таймерами в jQuery”

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

    Кстати, во втором примере, сколько таймеров будет установлено? Один, или столько, сколько элементов ul будет найдено?

  2. @Alno
    А по-моему цепочки вызовов здесь очень даже полезны. Ведь как вы понимаете в setTimeout и setInterval нет никакой привязки к элементам, а в этих новых функциях есть. Следовательно, вместо:
    $(’#myElem’).everyTime(…);
    $(’#myElem’).oneTime(…);
    пишем просто:
    $(’#myElem’).everyTime(…).oneTime(…);
    Эта строка назначит сразу два таймера одному элемента.

    Что касается второго примера, то тут будут установлены столько таймеров, сколько элементов ul будет найдено. Каждый из таймеров будет иметь ярлык controlled.

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

JSToolbox создан на основе WordPress