jQuerytimers计时器简单应用说明
大家都知道jQuery很强大，也有很多效果很帅的插件，下面介绍下jQuery定时器插件jQueryTimers，那JS都自带有定时器，为什么要使用Jquery的呢？
因为方便嘛，Jquery已封装JS的setTimeout和setInterval方法，下面看下应用例子：
复制代码代码如下:
/
jQuery.timers-TimerabstractionsforjQuery
WrittenbyBlairMitchelmore(blairDOTmitchelmoreATgmailDOTcom)
LicensedundertheWTFPL(sam.zoy.org/wtfpl/).
Date:2009/10/16
@authorBlairMitchelmore
@version1.2
/
jQuery.fn.extend({
everyTime:function(interval,label,fn,times){
returnthis.each(function(){
jQuery.timer.add(this,interval,label,fn,times);
});
},
oneTime:function(interval,label,fn){
returnthis.each(function(){
jQuery.timer.add(this,interval,label,fn,1);
});
},
stopTime:function(label,fn){
returnthis.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:{
//Yeahthisismajoroverkill...
''ms'':1,
''cs'':10,
''ds'':100,
''s'':1000,
''das'':10000,
''hs'':100000,
''ks'':1000000
},
timeParse:function(value){
if(value==undefined||value==null)
returnnull;
varresult=this.regex.exec(jQuery.trim(value.toString()));
if(result[2]){
varnum=parseFloat(result[1]);
varmult=this.powers[result[2]]||1;
returnnummult;
}else{
returnvalue;
}
},
add:function(element,interval,label,fn,times){
varcounter=0;
if(jQuery.isFunction(label)){
if(!times)
times=fn;
fn=label;
label=interval;
}
interval=jQuery.timer.timeParse(interval);
if(typeofinterval!=''number''||isNaN(interval)||interval<0)
return;
if(typeoftimes!=''number''||isNaN(times)||times<0)
times=0;
times=times||0;
vartimers=jQuery.data(element,this.dataKey)||jQuery.data(element,this.www.hunanwang.netdataKey,{});
if(!timers[label])
timers[label]={};
fn.timerID=fn.timerID||this.guid++;
varhandler=function(){
if((++counter>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){
vartimers=jQuery.data(element,this.dataKey),ret;
if(timers){
if(!label){
for(labelintimers)
this.remove(element,label,fn);
}elseif(timers[label]){
if(fn){
if(fn.timerID){
window.clearInterval(timers[label][fn.timerID]);
deletetimers[label][fn.timerID];
}
}else{
for(varfnintimers[label]){
window.clearInterval(timers[label][fn]);
deletetimers[label][fn];
}
}
for(retintimers[label])break;
if(!ret){
ret=null;
deletetimers[label];
}
}
for(retintimers)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);
});
});
JSCode
复制代码代码如下:
$("#close-button").click(function(){
$(this).oneTime(1000,function(){
$(this).parent(".main-window").www.visa158.comhide();
});
});
$("#cancel-button").click(function(){
$("#close-button").stopTime();
});
jQueryTimers插件地址：
plugins.jquery/project/timers
下面来自JavaEye论坛的JQueryTimers应用知识
提供了三个函式
1.everyTime(时间间隔,[计时器名称],函式名称,[次数限制],[等待函式程序完成])
2.oneTime(时间间隔,[计时器名称],呼叫的函式)
3.stopTime([计时器名称],[函式名称])
复制代码代码如下:
/
everyTime(时间间隔,[计时器名称],函式名称,[次数限制],[等待函式程序完成])
/
//每1秒执行函式test()
functiontest(){
//dosomething...
}
$(''body'').everyTime(''1s'',test);
//每1秒执行
$(''body'').everyTime(''1s'',function(){
//dosomething...
});
//每1秒执行，并命名计时器名称为A
$(''body'').everyTime(''1s'',''A'',function(){
//dosomething...
});
//每20秒执行，最多5次，并命名计时器名称为B
$(''body'').everyTime(''2das'',''B'',function(){
//dosomething...
},5);
//每20秒执行，无限次，并命名计时器名称为C
//若时间间隔抵到，但函式程序仍未完成则需等待执行函式完成后再继续计时
$(''body'').everyTime(''2das'',''C'',function(){
//执行一个会超过20秒以上的程式
},0,true);
/
oneTime(时间间隔,[计时器名称],呼叫的函式)
/
//倒数10秒后执行
$(''body'').oneTime(''1das'',function(){
//dosomething...
});
//倒数100秒后执行，并命名计时器名称为D
$(''body'').oneTime(''1hs'',''D'',function(){
//dosomething...
});
/
stopTime([计时器名称],[函式名称])
/
//停止所有的在$(''body'')上计时器
$(''body'').stopTime();
//停止$(''body'')上名称为A的计时器
$(''body'').stopTime(''A'');
//停止$(''body'')上所有呼叫test()的计时器
$(''body'').stopTime(test);
自定义时间单位
打开源代码
找到
复制代码代码如下:
powers:{
//Yeahthisismajoroverkill...
''ms'':1,
''cs'':10,
''ds'':100,
''s'':1000,
''das'':10000,
''hs'':100000,
''ks'':1000000
}
可以定制自己想要的了！
|
|
