Because it's convenient, jquery has encapsulated JS's settimeout and SetInterval methods, look at the application example below:
Copy Code code as follows:
/**
* Jquery.timers-timer abstractions 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,
' Das ': 10000,
' HS ': 100000,
' KS ': 1000000
},
Timeparse:function (value) {
if (value = = Undefined | | = value = NULL)
return null;
var result = This.regex.exec (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. Timers[label]) break;
if (!ret) {
ret = NULL;
Delete Timers[label];
}
}
for (ret. 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 Code
Copy Code code as follows:
$ ("#close-button"). Click (function () {
$ (this). Onetime (1000, function () {
$ (this). Parent (". Main-window"). Hide ();
});
});
$ ("#cancel-button"). Click (function () {
$ ("#close-button"). StopTime ();
});
JQuery Timers Plugin Address:
Http://plugins.jquery.com/project/timers
Below comes the jquery Timers application knowledge from the Javaeye forum
Three functions are provided
1. EveryTime (time interval, [timer name], function name, [limit of times], [Wait for function program complete])
2. Onetime (time interval, [timer name], call function)
3. StopTime ([timer name], [function name])
Copy Code code as follows:
/*************************************************************
* EveryTime (time interval, [timer name], function name, [limit of times], [wait function complete])
*************************************************************/
Execute function Test () every 1 seconds
function Test () {
Do something ...
}
$ (' body '). everyTime (' 1s ', test);
Performed every 1 seconds
$ (' body '). everyTime (' 1s ', function () {
Do something ...
});
Execute every 1 seconds and name the timer named a
$ (' body '). everyTime (' 1s ', ' A ', function () {
Do something ...
});
Execute every 20 seconds, up to 5 times, and name the timer named B
$ (' body '). EveryTime (' 2das ', ' B ', function () {
Do something ...
},5);
Execute every 20 seconds, infinite number of times, and name the timer named C
If the time interval arrives, but the function is still incomplete, wait for the execution function to complete before continuing the timer
$ (' body '). EveryTime (' 2das ', ' C ', function () {
Execute a program that will last more than 20 seconds
},0,true);
/***********************************************************
* Onetime (time interval, [timer name], call function)
***********************************************************/
Minus 10 seconds to execute.
$ (' body '). Onetime (' 1das ', function () {
Do something ...
});
Execute after 100 seconds, and name the timer named D
$ (' body '). Onetime (' 1hs ', ' D ', function () {
Do something ...
});
/************************************************************
* STOPTIME ([timer name], [function name])
************************************************************/
Stop all the timers on the $ (' body ')
$ (' body '). StopTime ();
Stop the timer named a on $ (' body ')
$ (' body '). StopTime (' A ');
Stop timer for all call Test () on $ (' body ')
$ (' body '). StopTime (test);
Custom time Units
Opening source code
Found it
Copy Code code as follows:
Powers: {
Yeah this is major overkill ...
' MS ': 1,
' CS ': 10,
' DS ': 100,
' s ': 1000,
' Das ': 10000,
' HS ': 100000,
' KS ': 1000000
}
You can customize what you want!
