快捷導航

js下寫一個事件隊列操作函數(shù)

更新時間：2010年07月19日 00:28:09 作者：

異步操作可能會產(chǎn)生你不希望的事件觸發(fā)順序。這個問題以前也遇到過，當時沒想太多，也就是直接多層嵌套（在ajax返回以后嵌套下一個事件）來解決。

前兩天在網(wǎng)上看到這一系列的文章《寫一個JavaScript異步調(diào)用框架1,2,3,4,5,6》。

異步操作可能會產(chǎn)生你不希望的事件觸發(fā)順序。這個問題以前也遇到過，當時沒想太多，也就是直接多層嵌套（在ajax返回以后嵌套下一個事件）來解決。

認真的看了一遍?？吹念^昏，不得不說我可能基礎(chǔ)并不好，在大局上的掌握也不好。d反正我是覺得很難理解，也不覺得它的調(diào)用時夠方便的。

　　　如果是這么調(diào)用：

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

我覺得這樣是完美的。但是實際上如果是異步調(diào)用卻是要這樣：

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

當然最后一篇提到再次封裝一下，我想大致上就能解決這種不方便的調(diào)用了。

其實以前我也是有過這個念頭，就是找一個能按我的順序來觸發(fā)的類或者什么，群里問問是否有這種類的時候，別人總都回句，在onreadychange里執(zhí)行就好啦，甚至有嘲笑的！加上當時又是初學的菜鳥也便作罷了。而現(xiàn)在雖然依舊是菜鳥，但終究飛了一段路程了。就試試按自己的理解寫一個事件隊列吧。

我總習慣看代碼說話，所以先上代碼，然后說一下思路好了：

復制代碼代碼如下:

 
/** 
KEQueue —— Events Queue 
@Author ake by 2010-04-25 
http://www.cnblogs.com/akecn 

@param data 事件隊列中每個事件都會將該參數(shù)作為第一個參數(shù)傳遞下去，除非通過KEQueue.status修改它的值。 
@method next(Function) 下一個要執(zhí)行的事件。 
@method wait(Number) 等待一定時間后執(zhí)行下一個事件。 
@method sleep() 停止事件序列的執(zhí)行。 
@method wake() 繼續(xù)執(zhí)行事件序列。 
**/ 
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);//延時方法的存放數(shù)組 
}else { 
this.staticQueue.push(callback);//直接觸發(fā)的方法的存放數(shù)組 
} 
return this; 
}, 
wait:function(delay) {//延遲執(zhí)行序列 
var self = this; 
this.next(function() {//模擬添加一個延時方法 
setTimeout(function() { 
self.wake.call(self) 
}, delay); 
},true); 
return this; 
}, 
go:function() {//按事件添加的先后順序依次執(zhí)行事件 
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(); 
} 
} 

估計你看了代碼就已經(jīng)明白是怎么做的了，代碼也很簡單。

其實就是循環(huán)去執(zhí)行一個數(shù)組中的方法，如果數(shù)組中存放的不是function，就停止隊列的操作直到被叫醒（wake()）。使用方法也比較偏向我喜歡的方式。

當然也許我只是看到事件是按我添加的順序去執(zhí)行了，但有很多其他的情況或者原因沒想到。如果您有建議或者意見，歡迎留言！

以下是使用示例。

復制代碼代碼如下:

 
//示例1 添加事件、執(zhí)行事件隊列 
function show(n) { 
console.log(n); 
} 
var o = new KEQueue("0"); 
o.next(function(d) { //參數(shù)是構(gòu)造時傳遞的數(shù)據(jù)。整個事件隊列都會返回該數(shù)據(jù)作為參數(shù)。 
show(d + 1); 
}).next(function(d) { 
setTimeout(function() { //模擬延時操作（異步操作） 
show(d + 2); 
o.result = 0; //更改用以傳遞的數(shù)據(jù)，如果不修改，該數(shù)據(jù)會保持一致一直傳遞到最后一個事件。 
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秒執(zhí)行下面的方法 
.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試了一下恩，看來還是沒問題的。

您可能感興趣的文章: