关于JQuery中Timers提供的三个函式everyTime、oneTime、stopTime
2016-01-06 00:00
686 查看
摘要: 今天工作中需要写一个图片自动轮播功能的插件,然后网上找了一个很好的插件,但是没有自动轮播的功能,然后自己就动手改掉,结果娶不到其中的方法,在其中使用setTimeout(),也是不行。在外部通过click来响应会和其它功能起冲突。最后才发现,还有everyTime()这个方法。自己网上找了些关于此方法的资料,记录在这,以备后用
JQuery
Timers
提供了三个函式
1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])
2. oneTime(时间间隔, [计时器名称], 呼叫的函式)
3. stopTime ([计时器名称], [函式名称])
例子:
一、everyTime
二、oneTime(时间间隔, [计时器名称], 呼叫的函式)
三、
附上官方地址:http://plugins.jquery.com/project/timers
源码地址:http://www.oschina.net/code/snippet_2348056_53401
3ff0
JQuery
Timers
提供了三个函式
1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])
2. oneTime(时间间隔, [计时器名称], 呼叫的函式)
3. stopTime ([计时器名称], [函式名称])
例子:
var times = chunks.length; $(document).everyTime(1000, function(i) { processChunk(i); }, times);
一、everyTime
//每1秒执行函式test() function test(){ //do something... } $('body').everyTime('1s',test); //每1秒执行 $('body').everyTime(10,function(){ //do something... }); //每1秒执行,并命名计时器名称为A $('body').everyTime(10,'A',function(){ //do something... }); //每20秒执行,最多5次,并命名计时器名称为B $('body').everyTime(200,'B',function(){ //do something... },5); //每20秒执行,无限次,并命名计时器名称为C //若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时 $('body').everyTime(200,'C',function(){ //执行一个会超过20秒以上的程式 },0,true); 例子: $("#close-button").click(function() { $(this).oneTime(1000, function() { $(this).parent(".main-window").hide(); }); }); $("#cancel-button").click(function() { $("#close-button").stopTime(); });
二、oneTime(时间间隔, [计时器名称], 呼叫的函式)
//倒数10秒后执行 $('body').oneTime(100,function(){ //do something... }); 例子: $("#close-button").click(function() { $(this).oneTime(1000, "hide", function() { $(this).parent(".main-window").hide(); }); }); $("#cancel-button").click(function() { $("#close-button").stopTime("hide"); });
三、
stopTime ([计时器名称], [函式名称])
//停止所有的在$('body')上计时器 $('body').stopTime (); //停止$('body')上名称为A的计时器 $('body').stopTime ('A'); //停止$('body')上所有呼叫test()的计时器 $('body').stopTime (test);
附上官方地址:http://plugins.jquery.com/project/timers
源码地址:http://www.oschina.net/code/snippet_2348056_53401
3ff0
相关文章推荐
- jQeury淡入淡出需要注意的问题
- 超漂亮的jQuery图片轮播特效
- javascript实现图片自动和可控的轮播切换特效
- js图片轮播手动切换效果
- js带缩略图的图片轮播效果代码分享
- js图片轮播特效代码分享
- 图解js图片轮播效果
- 详解js图片轮播效果实现原理
- jQuery平滑旋转幻灯片特效代码分享
- jquery的幻灯片图片切换效果代码分享
- JQuery实现图片轮播效果
- 基于jQuery实现响应式圆形图片轮播特效
- jQuery实现宽屏图片轮播实例教程
- jQuery实现图片轮播特效代码分享
- jquery带动画效果幻灯片特效代码
- jQuery制作简洁的图片轮播效果
- jquery图片轮播特效代码分享
- jQuery带进度条全屏图片轮播特效代码分享
- jquery实现的3D旋转木马特效代码分享
- jQuery图片轮播滚动切换代码分享