jQuery AjaxQueue改进步骤

 更新时间:2011年10月06日 22:53:10   作者:  
之前用jquery实现了一个简单的AjaxQueue,用于管理ajax请求的发送顺序。这次改进了下。
假期里没事就想着改进下,改得地方不多,主要有以下三点:
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。

相关文章

  • jQuery弹框插件使用方法详解

    jQuery弹框插件使用方法详解

    这篇文章主要为大家详细介绍了jQuery弹框插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Ajax 数据请求的简单分析

    Ajax 数据请求的简单分析

    Ajax使用的关键对象是XmlHttpRequest对象,但是涉及到跨浏览器的的问题,所以,需要创建一个具兼容性的对象
    2011-04-04
  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    jQuery实现的鼠标滚轮控制图片缩放功能实例

    这篇文章主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • 基于jquery实现智能提示控件intellSeach.js

    基于jquery实现智能提示控件intellSeach.js

    这篇文章主要为大家详细介绍了基于jquery实现智能提示控件intellSeach.js的相关资料,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery实现的导航固定效果

    jquery实现的导航固定效果

    这篇文章主要介绍了jquery实现的导航固定效果,需要的朋友可以参考下
    2014-04-04
  • Jquery实现的一种常用高亮效果示例代码

    Jquery实现的一种常用高亮效果示例代码

    本篇文章只要是对Jquery实现的一种常用高亮效果示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jquery动态赋值id与动态取id方法示例

    jquery动态赋值id与动态取id方法示例

    这篇文章主要给大家介绍了关于jquery动态赋值id与动态取id的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • 利用jQuary实现文字浮动提示效果示例代码

    利用jQuary实现文字浮动提示效果示例代码

    文字浮动提示效果想必大家都有见到过吧,其实实现起来很贱的,下面为大家详细介绍下使用jquery是如何做到的,感兴趣的朋友可以参考下
    2013-12-12
  • jQuery实现提示密码强度的代码

    jQuery实现提示密码强度的代码

    本文给大家介绍的是一个非常常见的功能,在输入密码的时候提示密码的强度,本文使用jQuery来实现,有需要的小伙伴可以参考下。
    2015-07-07
  • jquery提示效果实例分析

    jquery提示效果实例分析

    这篇文章主要介绍了jquery提示效果,以一个简单实例较为详细的分析了jQuery提示效果的实现方法与相关注意事项,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-11-11

最新评论