【隨筆】一個簡單的JavaScript非同步處理事件隊列

當我們需要連續執行幾個函數，而這幾個函數會一直對頁面元素進行操作時，很可能頁面會出現短暫的卡，然後，一下子爆炸性的出現所有資訊。

一般我們會用setTimeout(fn,0);這種來執行，其實js的setTimeout，特別是IE6的，回應時間最快也要17毫秒左右，所以，設定成0，意義不大。

而且，這種做法，存在不連續，不連貫性。所以，自己寫了個簡單的。

 

 1 /**
 2  * @author floyd
 3  * @name 非同步處理事件隊列
 4  * @example var qe = new QueneEnginer();qe.add(fn,context,arrParam);qe.start();
 5  */
 6 
 7 var QueneEnginer = function(){
 8 
 9     this.Quene = [];
10 }
11 QueneEnginer.prototype = {
12     processTime : 20,
13     /**
14      * 添加事件到隊列中
15      * @param {function} fn 函數對象
16      * @param {object} context 內容物件 可為空白
17      * @param {array} arrParam 參數數組 可為空白
18      */
19     add : function(fn,context,arrParam){
20 
21         this.Quene.push(
22             {
23                 fn : fn,
24                 context : context,
25                 param : arrParam
26             }
27         );
28     },
29     start : function(){
30         var that = this;
31         setTimeout(function(){that.process();},that.processTime);
32     },
33     process : function(){
34         
35         var quene = this.Quene.shift();
36         
37         if(!quene)return ;
38 
39         quene.fn.apply(quene.context,quene.param);
40         
41         quene = null;
42         
43         this.start();
44     }
45 }