DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery AjaxQueue改進步驟
jQuery AjaxQueue改進步驟
編輯:JQuery特效代碼     
假期裡沒事就想著改進下,改得地方不多,主要有以下三點:
complete回調在jquery1.5以後可以是一個函數數組,按數組順序調用。
如果前一個請求未返回,新的請求發出,那麼撤銷前一個請求,也就是新的請求“覆蓋”原請求。
寫成面向對象的形式,再用一個AjaxManage進行簡單的管理。
代碼如下,詳細可看注釋:
代碼如下:
;(function($) {
// override:新的請求是否要覆蓋之前的請求
function AjaxQueue(override) {
this.override = !!override;
};
AjaxQueue.prototype = {
requests: new Array(),
offer: function(options) {
var _self = this;
var xhrOptions = $.extend({}, options, {
complete: function(jqXHR, textStatus) {
// 支持complete是函數數組的情況
if($.isArray(options.complete)) {
var funcs = options.complete;
for(var i = 0, len = funcs.length; i < len; i++)
funcs[i].call(this, jqXHR, textStatus);
} else {
if(options.complete)
options.complete.call(this, jqXHR, textStatus);
}
// 處理結束,從隊列中發出下一個ajax請求
_self.poll();
},
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, settings);
// 如果當前ajax請求因為某些原因被撤銷了,那麼去發下一個ajax請求
if(ret === false) {
_self.poll();
return ret;
}
}
});
// 如果支持覆蓋,那麼調用replace
if(this.override) {
// console.log('go override');
this.replace(xhrOptions);
// 反之放入隊列
} else {
// console.log('go queue');
this.requests.push(xhrOptions);
if(this.requests.length == 1) {
$.ajax(xhrOptions);
}
}
},
// 撤銷前一個請求,發送新的請求
replace: function(xhrOptions) {
var prevRet = this.peek();
if(prevRet != null) {
// jquery源碼中可以看到此方法
prevRet.abort();
}
this.requests.shift();
this.requests.push($.ajax(xhrOptions));
},
// 輪詢隊列 發送下一個請求
poll: function() {
if(this.isEmpty()) {
return null;
}
var processedRequest = this.requests.shift();
var nextRequest = this.peek();
if(nextRequest != null) {
$.ajax(nextRequest);
}
return processedRequest;
},
// 返回隊列頭部的請求
peek: function() {
if(this.isEmpty()) {
return null;
}
var nextRequest = this.requests[0];
return nextRequest;
},
// 判斷隊列是否為空
isEmpty: function() {
return this.requests.length == 0;
}
};
var queue = {};
// 管理AjaxQueue的簡單對象
var AjaxManager = {
// 創建新的ajaxQueue
createQueue: function(name, override) {
return queue[name] = new AjaxQueue(override);
},
// 清除對應name的ajaxQueue
destroyQueue: function(name) {
if(queue[name]) {
queue[name] = null;
delete queue[name];
}
},
// 根據name得到對應的ajaxQueue
getQueue: function(name) {
return ( queue[name] ? queue[name] : null);
}
};
// 跟jQuery關聯起來,給個簡稱,方便調用
$.AM = AjaxManager;
})(jQuery);

其實也想再加上done,fail,always等配置,但或許會變得有點復雜,就先保持簡單
這裡有兩個我的jsfiddle頁面,一個是覆蓋效果的,一個是隊列效果的,可以直接測試運行。
就到這裡,如有問題,歡迎指出,thanks。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved