jQuery实现的ajax队列(queue)

----jquery load实现局部刷新----

<div id="area1">area1:xxx1</div>

<div id="area2">area2: xxx2</div>

<script language="javascript">

function loadArea2(){

$("#area2").load(location.href+' #area2',{'random':Math.random});

setTimeout("loadArea2()", 1000);

}

loadArea2();

</script>

-----queue队列实现----

自从jquery 1.3 以后，有个function能够很好的支持队列，那就是

queue

。

queue(name)

返回指向第一个匹配元素的队列(将是一个函数数组)

要实现ajax队列，可以将ajax引入queue中。如下代码实现

以上代码实现了ajax队列，2个ajax同步执行，其中dequeue用来结束当前ajax，并调用下一个ajax请求。

接下来，我们再来看看另一个ajax 队列的需求（需求二）：

在注册的时候验证邮箱、用户名等时候，单个客户端可以频繁发出无数的ajax请求出去，而我们的结果肯定是以最后一个ajax请求为准的。

首先模拟一个服务端页面：

然后是前台页面，假设由一个元素触发：

html代码：

JS代码：

下面是firebug下的执行结果，我连续对dtitle元素点击三次，如愿每5秒才发送一次请求。当然这只是演示的原理，既然发了三次请求，肯定要以最后一次为准，那么可以通过队列的length属性来轮循，一时length变为0了，就是全部请求结束了，你就可以执行你想要的逻辑了





好了，通过上面的代码，应该对queue的用法和ajax队列有一定了解了。人总是要不断追求完美的，粗矿的代码，并不能提升代码水平。既然队列那么常用，那是否需要将这个功能封装？答案是肯定的。网上也有一些已经封装好了的插件。

那就重写$.ajax 这个方法吧。说干就干：

以上代码加入了1个mode变量，有3个值”abort”(中止),”queue”(队列),”sync”同步。

对于需求二，我们用这个封装好的ajax改写并改进下,js代码部分如下：

可以直接用封装好的那段js代码，直接用mode: “abort”

就可以了。