jQuery AjaxQueue改進(jìn)步驟
更新時(shí)間:2011年10月06日 22:53:10 作者:
之前用jquery實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的AjaxQueue,用于管理ajax請(qǐng)求的發(fā)送順序。這次改進(jìn)了下。
假期里沒(méi)事就想著改進(jìn)下,改得地方不多,主要有以下三點(diǎn):
complete回調(diào)在jquery1.5以后可以是一個(gè)函數(shù)數(shù)組,按數(shù)組順序調(diào)用。
如果前一個(gè)請(qǐng)求未返回,新的請(qǐng)求發(fā)出,那么撤銷前一個(gè)請(qǐng)求,也就是新的請(qǐng)求“覆蓋”原請(qǐng)求。
寫成面向?qū)ο蟮男问?,再用一個(gè)AjaxManage進(jìn)行簡(jiǎn)單的管理。
代碼如下,詳細(xì)可看注釋:
;(function($) {
// override:新的請(qǐng)求是否要覆蓋之前的請(qǐng)求
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是函數(shù)數(shù)組的情況
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);
}
// 處理結(jié)束,從隊(duì)列中發(fā)出下一個(gè)ajax請(qǐng)求
_self.poll();
},
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, settings);
// 如果當(dāng)前ajax請(qǐng)求因?yàn)槟承┰虮怀蜂N了,那么去發(fā)下一個(gè)ajax請(qǐng)求
if(ret === false) {
_self.poll();
return ret;
}
}
});
// 如果支持覆蓋,那么調(diào)用replace
if(this.override) {
// console.log('go override');
this.replace(xhrOptions);
// 反之放入隊(duì)列
} else {
// console.log('go queue');
this.requests.push(xhrOptions);
if(this.requests.length == 1) {
$.ajax(xhrOptions);
}
}
},
// 撤銷前一個(gè)請(qǐng)求,發(fā)送新的請(qǐng)求
replace: function(xhrOptions) {
var prevRet = this.peek();
if(prevRet != null) {
// jquery源碼中可以看到此方法
prevRet.abort();
}
this.requests.shift();
this.requests.push($.ajax(xhrOptions));
},
// 輪詢隊(duì)列 發(fā)送下一個(gè)請(qǐng)求
poll: function() {
if(this.isEmpty()) {
return null;
}
var processedRequest = this.requests.shift();
var nextRequest = this.peek();
if(nextRequest != null) {
$.ajax(nextRequest);
}
return processedRequest;
},
// 返回隊(duì)列頭部的請(qǐng)求
peek: function() {
if(this.isEmpty()) {
return null;
}
var nextRequest = this.requests[0];
return nextRequest;
},
// 判斷隊(duì)列是否為空
isEmpty: function() {
return this.requests.length == 0;
}
};
var queue = {};
// 管理AjaxQueue的簡(jiǎn)單對(duì)象
var AjaxManager = {
// 創(chuàng)建新的ajaxQueue
createQueue: function(name, override) {
return queue[name] = new AjaxQueue(override);
},
// 清除對(duì)應(yīng)name的ajaxQueue
destroyQueue: function(name) {
if(queue[name]) {
queue[name] = null;
delete queue[name];
}
},
// 根據(jù)name得到對(duì)應(yīng)的ajaxQueue
getQueue: function(name) {
return ( queue[name] ? queue[name] : null);
}
};
// 跟jQuery關(guān)聯(lián)起來(lái),給個(gè)簡(jiǎn)稱,方便調(diào)用
$.AM = AjaxManager;
})(jQuery);
其實(shí)也想再加上done,fail,always等配置,但或許會(huì)變得有點(diǎn)復(fù)雜,就先保持簡(jiǎn)單
這里有兩個(gè)我的jsfiddle頁(yè)面,一個(gè)是覆蓋效果的,一個(gè)是隊(duì)列效果的,可以直接測(cè)試運(yùn)行。
就到這里,如有問(wèn)題,歡迎指出,thanks。
complete回調(diào)在jquery1.5以后可以是一個(gè)函數(shù)數(shù)組,按數(shù)組順序調(diào)用。
如果前一個(gè)請(qǐng)求未返回,新的請(qǐng)求發(fā)出,那么撤銷前一個(gè)請(qǐng)求,也就是新的請(qǐng)求“覆蓋”原請(qǐng)求。
寫成面向?qū)ο蟮男问?,再用一個(gè)AjaxManage進(jìn)行簡(jiǎn)單的管理。
代碼如下,詳細(xì)可看注釋:
復(fù)制代碼 代碼如下:
;(function($) {
// override:新的請(qǐng)求是否要覆蓋之前的請(qǐng)求
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是函數(shù)數(shù)組的情況
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);
}
// 處理結(jié)束,從隊(duì)列中發(fā)出下一個(gè)ajax請(qǐng)求
_self.poll();
},
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, settings);
// 如果當(dāng)前ajax請(qǐng)求因?yàn)槟承┰虮怀蜂N了,那么去發(fā)下一個(gè)ajax請(qǐng)求
if(ret === false) {
_self.poll();
return ret;
}
}
});
// 如果支持覆蓋,那么調(diào)用replace
if(this.override) {
// console.log('go override');
this.replace(xhrOptions);
// 反之放入隊(duì)列
} else {
// console.log('go queue');
this.requests.push(xhrOptions);
if(this.requests.length == 1) {
$.ajax(xhrOptions);
}
}
},
// 撤銷前一個(gè)請(qǐng)求,發(fā)送新的請(qǐng)求
replace: function(xhrOptions) {
var prevRet = this.peek();
if(prevRet != null) {
// jquery源碼中可以看到此方法
prevRet.abort();
}
this.requests.shift();
this.requests.push($.ajax(xhrOptions));
},
// 輪詢隊(duì)列 發(fā)送下一個(gè)請(qǐng)求
poll: function() {
if(this.isEmpty()) {
return null;
}
var processedRequest = this.requests.shift();
var nextRequest = this.peek();
if(nextRequest != null) {
$.ajax(nextRequest);
}
return processedRequest;
},
// 返回隊(duì)列頭部的請(qǐng)求
peek: function() {
if(this.isEmpty()) {
return null;
}
var nextRequest = this.requests[0];
return nextRequest;
},
// 判斷隊(duì)列是否為空
isEmpty: function() {
return this.requests.length == 0;
}
};
var queue = {};
// 管理AjaxQueue的簡(jiǎn)單對(duì)象
var AjaxManager = {
// 創(chuàng)建新的ajaxQueue
createQueue: function(name, override) {
return queue[name] = new AjaxQueue(override);
},
// 清除對(duì)應(yīng)name的ajaxQueue
destroyQueue: function(name) {
if(queue[name]) {
queue[name] = null;
delete queue[name];
}
},
// 根據(jù)name得到對(duì)應(yīng)的ajaxQueue
getQueue: function(name) {
return ( queue[name] ? queue[name] : null);
}
};
// 跟jQuery關(guān)聯(lián)起來(lái),給個(gè)簡(jiǎn)稱,方便調(diào)用
$.AM = AjaxManager;
})(jQuery);
其實(shí)也想再加上done,fail,always等配置,但或許會(huì)變得有點(diǎn)復(fù)雜,就先保持簡(jiǎn)單
這里有兩個(gè)我的jsfiddle頁(yè)面,一個(gè)是覆蓋效果的,一個(gè)是隊(duì)列效果的,可以直接測(cè)試運(yùn)行。
就到這里,如有問(wèn)題,歡迎指出,thanks。
相關(guān)文章
Ajax 數(shù)據(jù)請(qǐng)求的簡(jiǎn)單分析
Ajax使用的關(guān)鍵對(duì)象是XmlHttpRequest對(duì)象,但是涉及到跨瀏覽器的的問(wèn)題,所以,需要?jiǎng)?chuàng)建一個(gè)具兼容性的對(duì)象2011-04-04
jQuery實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能,結(jié)合完整實(shí)例形式分析了jQuery基于鼠標(biāo)滾輪mousewheel事件進(jìn)行頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10
基于jquery實(shí)現(xiàn)智能提示控件intellSeach.js
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)智能提示控件intellSeach.js的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-03-03
jquery實(shí)現(xiàn)的導(dǎo)航固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的導(dǎo)航固定效果,需要的朋友可以參考下2014-04-04
Jquery實(shí)現(xiàn)的一種常用高亮效果示例代碼
本篇文章只要是對(duì)Jquery實(shí)現(xiàn)的一種常用高亮效果示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
jquery動(dòng)態(tài)賦值id與動(dòng)態(tài)取id方法示例
這篇文章主要給大家介紹了關(guān)于jquery動(dòng)態(tài)賦值id與動(dòng)態(tài)取id的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
文字浮動(dòng)提示效果想必大家都有見(jiàn)到過(guò)吧,其實(shí)實(shí)現(xiàn)起來(lái)很賤的,下面為大家詳細(xì)介紹下使用jquery是如何做到的,感興趣的朋友可以參考下2013-12-12
jQuery實(shí)現(xiàn)提示密碼強(qiáng)度的代碼
本文給大家介紹的是一個(gè)非常常見(jiàn)的功能,在輸入密碼的時(shí)候提示密碼的強(qiáng)度,本文使用jQuery來(lái)實(shí)現(xiàn),有需要的小伙伴可以參考下。2015-07-07

