jquery队列操作案例

发表于 更新于 分类于 阅读次数：

由于页面中动态数据较多，比如动态ajax获取下拉框option数据，当页面中需要对select元素进行操
作时，其DOM操作必须后与select框数据渲染完成后，此时队列操作至关重要。使得异步操作同步化。

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
* 初始化队列函数
* @fnarr   函数数组，异步执行的代码块集合
* @name    队列名
**/
function initQueue(name , fnarr){
  $(document).queue( name , fnarr);
  dequeue( name );
}

/*
* 出队函数
* @name  队列名
*/
function dequeue(name){
  $(document).dequeue( name );
}


调用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

//定义函数数组
var fnarr = [
  function(){
    console.log("action one");
    dequeue("myqueue"); //出队操作，保证下一排队函数可继续执行
  },
  function(){
    console.log("action two");
    dequeue("myqueue");
  },
  
  // more action ...
  function(){
    console.log("action three");
    
    //所有异步操作结束后,执行页面主函数
    main();
  }
  
];

//激活队列
initQueue("myqueue" , fnarr);


function main(){
  //这是页面主函数
}