js下写一个事件队列操作函数
2024-05-06 14:28:11
供稿：网友
前两天在网上看到这一系列的文章《写一个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) {
