情景一:以客户端最后一次请求为准

客户端发起 N 次异步请求,客户端发出的第 N 次请求得到响应时触发事件。

实现一:使用自定义计数器

设置 ajax 请求计数器,每发出一次 ajax 请求时,计数器加一,并且将计数作为 context 属性传递给 ajax,即设置 ajax 的 context 为 {order: count},然后每次 ajax 请求结束时,检查 this.order 是否等于当前计数,是的话表示本次请求就是最后一次请求,然后触发事件。(计数器清零与否不影响本实现)

情景二:以服务器最后一次响应为准

客户端发起 N 次 ajax 请求,等待所有请求结束时才触发事件。

实现一:使用自定义计数器

设置 ajax 请求计数器,每发起一次 ajax 请求时,计数器加一,增加计数的方式可以是在执行 ajax 请求之前增加计数,或者在 beforeSend 中增加计数,当每次 ajax 请求结束时,计数器减一,减少计数的方式可以在 always 中执行,当计数器回归为 0 时,表示所有 ajax 请求结束。

使用自定义计数器的好处是可以灵活处理多种计数。

实现二:使用 .ajaxStop() 方法

当所有 $.ajax 请求结束时,jQuery 触发 ajaxStop 事件。使用 ajaxStop 的好处是简单易用,不足之处是 ajaxStop 是一个全局事件,当页面存在 N + 1 次 ajax 请求时则无法区分 N 次的结束时刻。

例如客户端提供的搜索框提示,需要根据用户的输入实时向服务器 URL1 发起请求获取联想词,同时向 URL2 发起请求上传其他数据。假设 URL1 和 URL2 都分别发送 N 次,而客户端需要确定在 URL1 最后一次服务器响应结束时向用户提供联想词,而此时 URL2 的所有请求可能还未结束,因此使用 ajaxStop 则无法使用。

情景三:只能同时发起一次请求

实现一:使用自定义计数器

设置 ajax 计数器,当开始 ajax 请求时,检查计数器是否为零,检查方法为在 beforeSend 中设置检查。计数器为零,允许发送请求,否则取消请求。当请求结束时,将计数器清零。

情景四:前一次请求结束,后一次请求开始

实现一:使用自定义数组

将 ajax 请求封装为内置有一个队列(数组)的对象,将请求的参数作为对象依次装入队列中,按照先进先出的原则,请求开始时,检查队列长度或者取第一个元素出列,然后开始发送请求,请求结束后循环此过程直至队列为空。

小结

使用计数器的另一个好处在于可以有序记录每次请求或者响应,尤其是当你需要按序处理(按照请求顺序或者响应顺序)你获取的数据时。

为了方便使用,你可以将计数器与你的 ajax 请求封装在一个类中。



Comments

comments powered by Disqus