Fork me on GitHub

jquery队列操作案例

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

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
* 初始化队列函数
* @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

//定义函数数组
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(){
//这是页面主函数
}
0%