js下寫一個事件隊列操作函數_javascript技巧

前兩天在網上看到這一系列的文章《寫一個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試了一下恩，看來還是沒問題的。