日期:2014-05-16 浏览次数:20791 次
在比较复杂的模块中碰到无数次多个Ajax异步请求同时请求(
不会用direct),而且往往需要在这些请求都完成后,根据所有的请求结果做一些事情,比如提交表单什么的,最初的解决方式是一个请求的回调里嵌下一个请求,勉强实现后,调试维护异常纠心,一圈一圈像个洋葱。
接着右思左想之下,写下这个简易的还算能用的队列(我随便称呼的,各位大人轻拍)。
本队列能加普通函数、Ext.Ajax.request请求、Store请求,可以任意调整顺序(其实就一数组,所以,你们懂的),可以按顺序执行,也可以无序同时执行请求,在所有请求完成后有事件可监听 (废话太多了,上代码)

Ext.ns("Ext.ux.queue");
/**
* @class Ext.ux.queue.Queue
* @extends Ext.util.Observable
*
* 队列,支持Ajax,Store,普通Function
*
<pre><code>
var log=[];
var queue = new Ext.ux.queue.Queue({
listeners:{
beforequeue: function(){
//Q.info("开始执行队列------------<br/>");
//return false;
},
afterqueue: function(self, flag){
Q.info("完成---"+log.join("<br/>")+"<br/>"+flag);
}
}
});
//-----------------------------------Ajax队列项---------------------------------
//1.直接使用【Ajax参数】方式创建Ajax队列项
var q1 = queue.addAjax({
url: path+"/sys/BusiUser^checkDiscountAuthorize.action",
params:{authorizeUser: "smallBeautiful@4304", authorizePwd: "123000"},
success: function(response){
var json = Ext.decode(response.responseText);
if(false === json.success){
log.push("执行【授权success】!---false");
return false;
}
log.push("执行【授权success】!---true");
//return true;
},
failure: function(response){
log.push("执行【授权failure】!----false");
return false;
},
callback: function(){
log.push("执行【授权callback】!");
//return true;
}
});
//2.直接【完整参数】方式创建Ajax队列项
var q1 = queue.addAjax({
params: {
url: path+"/sys/BusiUser^checkDiscountAuthorize.action",
params:{authorizeUser: "smallBeautiful@4304", authorizePwd: "123000"},
success: function(response){
var json = Ext.decode(response.responseText);
if(false === json.success){
log.push("执行【授权success】!---false");
return false;
}
log.push("执行【授权success】!---true");
//return true;
},
failure: function(response){
log.push("执行【授权failure】!----false");
return false;
},
callback: function(){
log.push("执行【授权callback】!");
//return true;
}
},
listeners: {
"beforeexecute": function(){
log.push("------------执行【q1 -> beforeexecute】!");
},
"afterexecute": function(){
log.push("------------执行【q1 -> afterexecute】!");
}
}
});
q1.on("beforeexecute", function(){
log.push("执行【q1 -> beforeexecute】!");
});
q1.on("afterexecute", function(){
log.push("执行【q1 -> afterexecute】!");
});
//-----------------------------------Ajax队列项----结束--------------------------
//-----------------------------------Store队列项---------------------------------
var q2 = queue.addStore({
store: grid.getStore(),
params: {
start:0,
limit:10,
callback: function(rs, options, success){
log.push("执行【store.load - callback】!");
//return success;
}
}
//,
//listeners: {
// "beforeexecute": function(){
// log.push("执行【q2 -> beforeexecute】!");
// },
// "afterexecute": function(){
// log.push("执行【q222222 -> afterexecute】!");
// }
//}
});
q2.on("beforeexecute", function(){
log.push("执行【q2 -> beforeexec