jQuery タイマーの簡単なアプリケーションの説明_jquery

便宜上、Jquery は JS の setTimeout メソッドと setInterval メソッドをカプセル化しています。アプリケーションの例を見てみましょう。

コードをコピーします コードは次のとおりです:

/**
* jQuery.timers - jQuery のタイマー抽象化
* Blair Mitchelmore 著 (blair DOT mitchelmore AT gmail DOT com)
* WTFPL に基づいてライセンスされています (http://sam.zoy.org/wtfpl/) ）。
* 日付: 2009/10/16
*
* @著者 Blair Mitchelmore
* @バージョン 1.2
*
**/

jQuery.fn.extend({
everyTime: function(interval, label, fn,回) {
return this .each(function() {
jQuery.timer.add(this, 間隔, ラベル, fn, 回);
}); : 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({
タイマー: {
グローバル: [],
guid: 1,
dataKey: "jQuery.timer ",
正規表現: / ^([0-9] (?:.[0-9]*)?)s*(.*s)?$/,
powers: {
//はい、これはやりすぎです...
'ms': 1、
'cs': 10、
'ds': 100、
's': 1000、
'das' : 10000,
'hs ': 100000,
'ks': 1000000
},
timeParse: function(value) {
if (value == 未定義 || 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[2]] || 1;
戻り値
} else {
戻り値; 🎜>},
add : function(要素, 間隔, ラベル, fn, 回) {
var counter = 0;

if (jQuery.isFunction(label)) {
if (!times)
times = fn;
fn = ラベル;

interval = jQuery.timer.timeParse(interval); 🎜>if (間隔のタイプ != '数値' || isNaN(間隔) || 間隔 return;

if (回数のタイプ != '数値' || isNaN(回) || 回 < 0)
回 = 0;

var timers (要素, this.dataKey) data(要素, this.dataKey, {});

if (!timers[label])
timers[label] = {};

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

var handler = function() {
if (( counter >jQuery.timer.remove(要素, ラベル, fn);

handler.timerID = fn.timerID;

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

this.global.push( 要素 );
削除: 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 ) {
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) ;
})
});




コードをコピー🎜>

コードは次のとおりです:


$("#close-button").click(function() {
$(this).oneTime(1000) , function() {
$(this ).parent(".main-window").hide();
})
$("#cancel-button"); ).click(function() {
$("#close-button").stopTime();
});


jQuery タイマー プラグイン アドレス:

http://plugins.jquery.com/project/timers

JavaEye フォーラムからの次の JQuery Timers アプリケーションのナレッジ

は 3 つの関数を提供します

1.間隔、[タイマー名]、関数式名、[制限数]、[関数プログラムの完了を待つ]) 2. oneTime (時間間隔、[タイマー名]、呼び出される関数) 3. [タイマー名], [関数名])

コードをコピー

コードは次のとおりです:

/***************************************************** *********
* everyTime(time interval, [timer name], function name, [number limit], [wait for function program to complete])
****** *************************************************** *****/

//Execute function test() 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 as A
$('body'). everyTime('1s','A',function(){
//do something...
});

//Execute every 20 seconds, up to 5 times, and name the timer The device name is 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 has not been completed, you need to wait for the execution function to complete before continuing to time
$('body').everyTime('2das','C',function(){
//Execute a program that will take more than 20 seconds
},0,true);

/***************************************************** *******
* oneTime(time interval, [timer name], called function)
******************** ****************************************/
//Execute after 10 seconds of countdown
$('body').oneTime('1das',function(){
//do something...
});

//Execute after 100 seconds of countdown, 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 all timers calling test() on $('body')
$('body').stopTime (test);

Custom time unit
Open the source code
Find

Copy the code The code is 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 !