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 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
Javascript Objects详解
Sep 04 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
ant design 日期格式化的实现
Oct 27 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迭代器的内部执行过程详解
2013/11/12 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
微信小程序仿美团城市选择
2018/06/06 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
JS实现吸顶特效
2020/01/08 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python设置环境变量的作用整理
2020/02/17 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python学习笔记之多进程
2020/08/06 Python
flask项目集成swagger的方法
2020/12/09 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
美德好少年主要事迹
2014/01/29 职场文书
乳制品整治工作方案
2014/05/29 职场文书
保证书格式
2015/01/16 职场文书
工作岗位职责范本
2015/02/15 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
解析MySQL binlog
2021/06/11 MySQL
Pygame Draw绘图函数的具体使用
2021/11/17 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
Python创建SQL数据库流程逐步讲解
2022/09/23 Python