js 链式延迟执行DOME


Posted in Javascript onJanuary 04, 2012

这样的形式执行:

d.wait(3000).run(function(m){ //等待3秒 
alert('从前有座山'); 
}).wait(1000).run(function(m){ //等待1秒 
alert('山里有座庙'); 
}).wait(2000).run(function(m){ //等待2秒 
alert('庙里有一个老和尚给一个小和尚讲故事'); 
}).wait(3000).run(function(m){ //等待3秒 
alert('讲的故事是:'); 
}).goStart(); //跳到第一条重新执行,这句拿掉就只执行一次
<!doctype html> 
<html> 
<head> 
<title>异步执行</title> 
</head> 
<body> 
<script type="text/javascript"> 
function Delay(){ 
this.funList= []; 
this.index = 0; 
this.re = null; 
this.isloop = false; 
}; 
Delay.prototype = { 
wait:function(m){ 
if(this.funList[this.index] && typeof this.funList[this.index].fun != 'function'){ 
m += this.funList[this.index].m; 
} 
this.funList[this.index] = {m:m,fun:null}; 
return this; 
}, 
run:function(fun){ 
if(typeof this.funList[this.index].fun != 'function'){ 
this.funList[this.index].fun = fun; 
this.index++; 
}else{ 
this.index++; 
this.funList[this.index] = {'m':0,'fun':fun}; 
} 
this.start(); 
return this; 
}, 
start:function(){ 
var self = this; 
if(this.re) return; 
var setOutrun = function(funList,index){ 
if(funList[index] == undefined){ 
clearTimeout(self.re); 
return false; 
} 
var m = funList[index].m, 
fun = funList[index].fun; 
typeof fun == 'function' || (fun = function(){}); 
self.re = setTimeout(function(){ 
if(fun(index) === false)return false; 
if(self.isloop){ 
index = -1; 
self.isloop = false; 
} 
setOutrun(funList,++index); 
},m); 
} 
setOutrun(this.funList,0); 
}, 
stop:function(){ 
return clearTimeout(this.re); 
}, 
goStart:function(){ 
var self = this, 
fun = function(){ 
self.isloop = true; 
}; 
if(this.funList[this.index] && typeof this.funList[this.index].fun != 'function'){ 
this.funList[this.index].fun = fun; 
this.index++; 
}else{ 
this.funList[this.index] = {'m':0,'fun':fun}; 
} 
this.start(); 
} 
}; 
var d = new Delay(); 
d.wait(3000).run(function(m){ 
alert('从前有座山'); 
}).wait(2000).run(function(m){ 
alert('山里有座庙'); 
}).wait(2000).run(function(m){ 
alert('庙里有一个老和尚给一个小和尚讲故事'); 
}).wait(2000).run(function(m){ 
alert('讲的故事是:'); 
}).goStart(); 
</script></body> 
</html>
Javascript 相关文章推荐
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 #Javascript
Textarea与懒惰渲染实现代码
Jan 04 #Javascript
js中有关IE版本检测
Jan 04 #Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 #Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 #Javascript
js变量以及其作用域详解
Jul 18 #Javascript
分享一个asp.net pager分页控件
Jan 04 #Javascript
You might like
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
angular.element方法汇总
2015/01/07 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python实现FTP文件传输的实例
2019/07/07 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
公司市场部岗位职责
2013/12/02 职场文书
先进员工事迹材料
2014/12/20 职场文书
南京导游词
2015/02/03 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
图解上海144收音机
2021/04/22 无线电
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
mysql如何查询连续记录
2022/05/11 MySQL