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!