WEB前端

jquery-ajaxQueue ajax请求队列

位置:首页 > WEB前端 > jquery教程,2013-12-24
ajax请求队列jquery-ajaxQueue有些场景里,用户在操作时能多次发送请求,比如电商网站购物车页面中,用户多次添加数量,多个商品选中、取消等等。采用

ajax请求队列
jquery-ajaxQueue
有些场景里,用户在操作时能多次发送请求,比如电商网站购物车页面中,用户多次添加数量,多个商品选中、取消等等。
采用ajax abort() beforeSend 请求打断 方法会打断上次的请求,但是不是很完美,虽然打断了请求,但是后台服务器还有可能接到请求,如果采用ajax请求队列的方式,则可能在一定时间内只向服务器发送一次请求,从而减少对服务器的压力。
经大师指点,google了下ajax的Queue方法,找到一个插件
“https://github.com/gnarf/jquery-ajaxQueue”
代码如下:

(function($) {

// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});

$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
//deferred 延迟方法
dfd = $.Deferred(),
promise = dfd.promise();

// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts );
//dferred.done当延迟成功时调用一个函数或者数组函数; dferred.resolve 解决递延对象,并根据给定的参数调用任何完成的回调函数。
jqXHR.done( dfd.resolve )
//fail 当延迟失败时调用一个函数或者数组函数.。 reject 拒绝延迟对象,并根据给定的参数调用任何失败的回调函数。
.fail( dfd.reject )
//then添加处理程序被调用时,递延对象得到解决或者拒绝。
.then( next, next );
}

// queue our ajax request
ajaxQueue.queue( doRequest );

// add the abort method
promise.abort = function( statusText ) {

// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}

// if there wasn't already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );

if ( index > -1 ) {
queue.splice( index, 1 );
}

// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts, [ promise, statusText, "" ] );
return promise;
};

return promise;
};

})(jQuery);

使用方法:



采用的后效果,在firebug中查看ajax请求会发现点击多次请求后,请求会在等第一个完成后再发送第二个依次类推。不会一次全部把请求发出去。

TAGS:jquery请求队列

猜你喜欢

NewHot手机版