jQuery Timers

When designing user interfaces, the task of using timers will someday come up, and in this article I want to tell you about the wonderful jQuery Timers plugin that will greatly facilitate the work of 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 will see an example, and then we will analyze the source code.

An example and source code can be downloaded here.


')
Example # 1 - demonstrates an unmanaged timer that simply counts down the seconds.
Example 2 - timer from 0 to 15 seconds with the ability to start and stop.
Example No. 3 - “one-time” timer, which performs a function after a certain time.

The examples are written in such a way as to demonstrate the work of all three methods that the plugin implements.

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

So, the code of example №1:

$( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

1. $( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .
2. $( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .
3. $( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

$( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

We selected an element with the identifier # example_1 and attached a timer to it, which will be triggered every 1000 milliseconds. Accordingly, every second a function will be executed that inserts the next digit into the selected element. In the example, we passed only two required arguments to the method. There are also optional, but they will be discussed below.

Let's look at the example code number 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 you click on the button with the identifier #start, we select the element with the identifier # example_2 and call the already familiar method everyTime. But at the same time, we give him, besides the obligatory arguments, another two. timer2 is the “label” of the corresponding timer, and the number 15 is the number of times the timer should stop running (unless of course any other event stops it before).
When clicking on the button with the identifier #stop, we again select the element with the identifier # example_2 and call the stopTime method, passing to it the “label” of the timer, which should be stopped.

And finally, example number 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 the 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” - the time can be specified both in milliseconds - 30,000, and in a human-readable form, simply - 30s.

And now a more detailed description of all three methods.
everyTime (interval, [label], fn, [times], [belay])
The arguments to the everyTime method are the function definition (fn: Function), as events that will run at regular intervals (interval: Integer | String), the necessary 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 for some reason was not completed.

oneTime (interval, [label], fn)
The arguments to the oneTime method are the function definition (fn: Function), which will be called after a certain time interval (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 on a timer that has a corresponding label [label: Integer | String] and terminates the execution of functions [fn: Function]. If none of the arguments is passed, the method stops all timer-running events for the elements of the jQuery object. If only the [fn] argument is passed, all events calling this function will be stopped regardless of the label. Finally, if only the [label] argument is passed, all events associated with this label will be stopped during initialization.
Tyuta