js下写一个事件队列操作函数


Posted in Javascript onJuly 19, 2010

前两天在网上看到这一系列的文章《写一个JavaScript异步调用框架1,2,3,4,5,6》。

异步操作可能会产生你不希望的事件触发顺序。这个问题以前也遇到过,当时没想太多,也就是直接多层嵌套(在ajax返回以后嵌套下一个事件)来解决。

认真的看了一遍。看的头昏,不得不说我可能基础并不好,在大局上的掌握也不好。d反正我是觉得很难理解,也不觉得它的调用时够方便的。

 如果是这么调用:

var chain = Async.go(0);
chain
.next(function(){setTimeout("alert(1)",3000)})
.next(function(){setTimeout("alert(2)",3000)})
.next(function(){setTimeout("alert(3)",3000)});

我觉得这样是完美的。但是实际上如果是异步调用却是要这样:

var chain = Async.go(0);
chain.next(function(){
var operation = new Async.Operation();
setTimeout(function(){ operation.yield("hello"); }, 3000);
return operation;
});

当然最后一篇提到再次封装一下,我想大致上就能解决这种不方便的调用了。

其实以前我也是有过这个念头,就是找一个能按我的顺序来触发的类或者什么,群里问问是否有这种类的时候,别人总都回句,在onreadychange里执行就好啦,甚至有嘲笑的!加上当时又是初学的菜鸟也便作罢了。而现在虽然依旧是菜鸟,但终究飞了一段路程了。就试试按自己的理解写一个事件队列吧。

我总习惯看代码说话,所以先上代码,然后说一下思路好了:

/** 
KEQueue —— Events Queue 
@Author ake by 2010-04-25 
http://www.cnblogs.com/akecn @param data 事件队列中每个事件都会将该参数作为第一个参数传递下去,除非通过KEQueue.status修改它的值。 
@method next(Function) 下一个要执行的事件。 
@method wait(Number) 等待一定时间后执行下一个事件。 
@method sleep() 停止事件序列的执行。 
@method wake() 继续执行事件序列。 
**/ 
var KEQueue = function(data) { 
this.staticQueue = []; 
this.asyncQueue = []; 
this.status = "running"; 
this.result = data; 
return this; 
} 
KEQueue.prototype = { 
next:function(callback, async) {//添加一个方法 
if(!!async) { 
this.staticQueue.push("async");//如果是异步方法(会有延时效果的方法)就添加标识 
this.asyncQueue.push(callback);//延时方法的存放数组 
}else { 
this.staticQueue.push(callback);//直接触发的方法的存放数组 
} 
return this; 
}, 
wait:function(delay) {//延迟执行序列 
var self = this; 
this.next(function() {//模拟添加一个延时方法 
setTimeout(function() { 
self.wake.call(self) 
}, delay); 
},true); 
return this; 
}, 
go:function() {//按事件添加的先后顺序依次执行事件 
if(this.staticQueue.length == 0) return; 
while(this.staticQueue.length > 0) { 
if(this.status === "sleep") return; 
var fun = this.staticQueue.shift(); 
if(typeof fun == "string" && fun == "async") { 
fun = this.asyncQueue.shift(); 
fun(this.result); 
this.sleep(); 
}else { 
fun(this.result); 
} 
} 
}, 
sleep:function() { 
this.status = "sleep"; 
}, 
wake:function() { 
this.status = "running"; 
this.go(); 
} 
}

估计你看了代码就已经明白是怎么做的了,代码也很简单。

其实就是循环去执行一个数组中的方法,如果数组中存放的不是function,就停止队列的操作直到被叫醒(wake())。使用方法也比较偏向我喜欢的方式。

当然也许我只是看到事件是按我添加的顺序去执行了,但有很多其他的情况或者原因没想到。如果您有建议或者意见,欢迎留言!

以下是使用示例。

//示例1 添加事件、执行事件队列 
function show(n) { 
console.log(n); 
} 
var o = new KEQueue("0"); 
o.next(function(d) { //参数是构造时传递的数据。整个事件队列都会返回该数据作为参数。 
show(d + 1); 
}).next(function(d) { 
setTimeout(function() { //模拟延时操作(异步操作) 
show(d + 2); 
o.result = 0; //更改用以传递的数据,如果不修改,该数据会保持一致一直传递到最后一个事件。 
o.wake(); //需要手动唤醒序列 
},2000); 
},true).next(function(d){ 
show(d + 3); 
}).go(); o.next(function(d) { 
setTimeout(function() {show(d + 4);o.wake(); },1000); 
},true).wait(1000) //手动推迟1秒执行下面的方法 
.next(function(d) { 
show(d + 5); 
}).go(); 
//示例2 
o.next(function() { 
show(1); 
}) 
setTimeout(function() { 
o.next(function(){ 
setTimeout(function() { 
show(2); 
o.wake(); 
},2000) 
},true).go(); 
},1000); 
setTimeout(function() { 
o.next(function() { 
show(3); 
}).go(); 
},2000);

PS:晚上睡觉的时候突然想说如果添加的是一个复杂事件,那么所消耗的时间久长了,这样会不会造成不期望的事件顺序呢?如果这样每个事件最后都要显示当做异步事件去处理,那这个队列就没什么大的意义了,最多就是帮你梳理一下事件顺序,仅此而已了。。

早上去公司路上又突然想起,JavaScript是单线程操作的哎,事件会被阻塞的,如果是多线程,估计也不需要做这么个队列了。

刚才写个demo试了一下恩,看来还是没问题的。

Javascript 相关文章推荐
js滚动条回到顶部的代码
Dec 06 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
js+css在交互上的应用
Jul 18 #Javascript
基于jQuery试卷自动排版系统
Jul 18 #Javascript
Date对象格式化函数代码
Jul 17 #Javascript
js下利用控制器载入对应脚本
Jul 17 #Javascript
js 纯数字不重复排列的另类方法
Jul 17 #Javascript
jQuery Autocomplete自动完成插件
Jul 17 #Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 #Javascript
You might like
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php文件读取方法实例分析
2015/06/20 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
js new Date()实例测试
2019/10/31 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
应届医学毕业生求职信分享
2013/12/02 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
读书之星事迹材料
2014/05/12 职场文书
我爱我校演讲稿
2014/05/21 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
采购部长岗位职责
2014/06/13 职场文书