Simple jQuery timers timer Application

Source: Internet
Author: User

For convenience, Jquery has encapsulated the setTimeout and setInterval methods of JS. The following is an example of an application: Copy codeThe Code is as follows :/**
* JQuery. timers-Timer implements actions for jQuery
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl ).
* Date: 2009/10/16
*
* @ Author Blair Mitchelmore
* @ Version 1.2
*
**/

JQuery. fn. extend ({
EveryTime: function (interval, label, fn, times ){
Return this. each (function (){
JQuery. timer. add (this, interval, label, fn, times );
});
},
OneTime: function (interval, label, fn ){
Return this. each (function (){
JQuery. timer. add (this, interval, label, fn, 1 );
});
},
StopTime: function (label, fn ){
Return this. each (function (){
JQuery. timer. remove (this, label, fn );
});
}
});

JQuery. extend ({
Timer :{
Global: [],
Guid: 1,
DataKey: "jQuery. timer ",
Regex:/^ ([0-9] + (? : \. [0-9] *)?) \ S * (. * s )? $ /,
Powers :{
// Yeah this is major overkill...
'Ms': 1,
'Cs ': 10,
'Ds': 100,
'S ': 1000,
'Da': 10000,
'Hs ': 100000,
'Ks ': 1000000
},
TimeParse: function (value ){
If (value = undefined | value = null)
Return null;
Var result = this.regex.exe c (jQuery. trim (value. toString ()));
If (result [2]) {
Var num = parseFloat (result [1]);
Var mult = this. powers [result [2] | 1;
Return num * mult;
} Else {
Return value;
}
},
Add: function (element, interval, label, fn, times ){
Var counter = 0;

If (jQuery. isFunction (label )){
If (! Times)
Times = fn;
Fn = label;
Label = interval;
}

Interval = jQuery. timer. timeParse (interval );

If (typeof interval! = 'Number' | isNaN (interval) | interval <0)
Return;

If (typeof times! = 'Number' | isNaN (times) | times <0)
Times = 0;

Times = times | 0;

Var timers = jQuery. data (element, this. dataKey) | jQuery. data (element, this. dataKey ,{});

If (! Timers [label])
Timers [label] = {};

Fn. timerID = fn. timerID | this. guid ++;

Var handler = function (){
If (++ counter> times & times! = 0) | fn. call (element, counter) = false)
JQuery. timer. remove (element, label, fn );
};

Handler. timerID = fn. timerID;

If (! Timers [label] [fn. timerID])
Timers [label] [fn. timerID] = window. setInterval (handler, interval );

This. global. push (element );

},
Remove: function (element, label, fn ){
Var timers = jQuery. data (element, this. dataKey), ret;

If (timers ){

If (! Label ){
For (label in timers)
This. remove (element, label, fn );
} Else if (timers [label]) {
If (fn ){
If (fn. timerID ){
Window. clearInterval (timers [label] [fn. timerID]);
Delete timers [label] [fn. timerID];
}
} Else {
For (var fn in timers [label]) {
Window. clearInterval (timers [label] [fn]);
Delete timers [label] [fn];
}
}

For (ret in timers [label]) break;
If (! Ret ){
Ret = null;
Delete timers [label];
}
}

For (ret in timers) break;
If (! Ret)
JQuery. removeData (element, this. dataKey );
}
}
}
});

JQuery (window). bind ("unload", function (){
JQuery. each (jQuery. timer. global, function (index, item ){
JQuery. timer. remove (item );
});
});

JS CodeCopy codeThe Code is as follows: $ ("# close-button"). click (function (){
$ (This). One time (1000, function (){
$ (This). parent (". main-window"). hide ();
});
});
$ ("# Cancel-button"). click (function (){
$ ("# Close-button"). stopTime ();
});

JQuery Timers plug-in address:
Http://plugins.jquery.com/project/timers

The following is the JQuery Timers application from the JavaEye forum.

Three functions are provided.
1. everyTime (time interval, [Timer name], function name, [number limit], [waiting for function completion])
2. oneTime (interval, [Timer name], call function)
3. stopTime ([Timer name], [function name])Copy codeThe Code is as follows: /*************************************** **********************
* EveryTime (interval, [Timer name], function name, [number limit], [waiting for function completion])
**************************************** *********************/

// Execute the test () function every 1 second ()
Function test (){
// Do something...
}
$ ('Body'). everyTime ('1s ', test );

// Execute every 1 second
$ ('Body'). everyTime ('1s ', function (){
// Do something...
});

// Execute every 1 second and name the Timer
$ ('Body'). everyTime ('1s ', 'A', function (){
// Do something...
});

// Execute every 20 seconds, up to 5 times, and name the timer B
$ ('Body'). everyTime ('2das ',' B ', function (){
// Do something...
}, 5 );

// Execute every 20 seconds, unlimited times, and name the timer as C
// If the time interval is reached, but the function program is not completed, you need to wait until the execution function is completed and continue timing.
$ ('Body'). everyTime ('2das ', 'C', function (){
// Execute a program that will take more than 20 seconds
}, 0, true );

/*************************************** ********************
* OneTime (interval, [Timer name], call function)
**************************************** *******************/
// Execute the task in the last 10 seconds
$ ('Body'). oneTime ('1das ', function (){
// Do something...
});

// Execute the task in the last 100 seconds and name the timer D.
$ ('Body'). oneTime ('1hs ', 'D', function (){
// Do something...
});

/*************************************** *********************
* StopTime ([Timer name], [function name])
**************************************** ********************/
// Stop all timers on $ ('body ')
$ ('Body'). stopTime ();

// Stop the timer named A on $ ('body ')
$ ('Body'). stopTime ('A ');

// Stop the timer for all calls test () on $ ('body ')
$ ('Body'). stopTime (test );

Custom time unit
Open source code
FindCopy codeThe Code is as follows: powers :{
// Yeah this is major overkill...
'Ms': 1,
'Cs ': 10,
'Ds': 100,
'S ': 1000,
'Da': 10000,
'Hs ': 100000,
'Ks ': 1000000
}

You can customize what you want!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.