jQuery Timers

When designing user interfaces, someday the task of using timers will surely arise, and in this article I want to talk about the wonderful jQuery Timers plugin , which will greatly facilitate the work on creating and using timers in your applications.
jQuery Timers is a high-level abstraction of the setTimeout and setInterval methods. Using jQuery Timers , you can “attach” timers to elements directly in your code and use some more features.
As usual, first we look at an example, and then we analyze the source code.

An example and source code can be downloaded here



Example No. 1 - shows an uncontrolled timer that simply counts seconds.
Example No. 2 - a timer from 0 to 15 seconds with the ability to start and stop.
Example No. 3 - a “one-time” timer that performs a certain function after a certain time.

The examples are written in such a way as to demonstrate the operation of all three methods that the plug-in implements.

HTML and CSS codes do not make sense - they are too simple. You can see them in the source. We will analyze only the js code in more detail.

So, example code 1:

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

* This source code was highlighted with Source Code Highlighter.

We selected the element with the identifier # example_1 and “attached” a timer to it, which will fire every 1000 milliseconds. Accordingly, every second a function will be worked out that will insert another digit into the selected element. In the example, we passed only two required arguments to the method. There are also optional ones, but they will be described below.

Let's look at the code of example No. 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.

When we click on the button with the identifier #start, we select the element with the identifier # example_2 and call the already familiar everyTime method. But at the same time we pass to him, in addition to the required arguments, two more. timer2 is the “label” of the corresponding timer, and the number 15 is the number of times the timer should work before stopping (unless of course any other event stops it earlier).
When we click on the button with the identifier #stop, we again select the element with the identifier # example_2 and call the stopTime method, passing it the “label” of the timer that should be stopped.

And finally, example 3:

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

* This source code was highlighted with Source Code Highlighter.

A “one-time” timer that is attached to an element with the identifier # example_3. The first argument is the time after which the corresponding function will be called. Pay attention to such a “trifle” - time can be indicated both in milliseconds - 30,000, and in a human-readable form, just 30s.

And now a more detailed description of all three methods.
everyTime (interval, [label], fn, [times], [belay])
the arguments of the everyTime method are the definition of the function (fn: Function), as the event that will be executed at certain intervals (interval: Integer | String), the required number of times [times = 0: Integer]. If the times argument is set to 0, the function will be called an unlimited number of times. The argument [label = interval: String] is the “label” of the corresponding timer. [belay] - an event that occurs if the previous iteration was not completed for some reason.

oneTime (interval, [label], fn)
the arguments to the oneTime method are the definition of the function (fn: Function) that will be called after a certain period of time (interval: Integer | String) after the element is added to the jQuery object. The argument [label = interval: String] is the “label” of the corresponding timer.

stopTime ([label], [fn])
the method stops the execution of all events executed by a timer that has the corresponding label [label: Integer | String] and terminates the execution of the [fn: Function] functions. If none of the arguments is passed, the method stops all timer-triggered events for jQuery object elements. If only the argument [fn] is passed, all events that call this function will be stopped regardless of the label. Finally, if only the [label] argument is passed, all events associated with this label during initialization will be stopped.
TyuTu