Ajax 多次异步请求分析
现象
鼠标滑过列表发出请求，在页面上显示请求结果。鼠标一次性滑过多个列表项，发出多个请求，请求返回结果有时间查导致页面显示出现闪烁。
影响
页面显示闪烁，视觉显示不好看，交互不友好
解决方法
取消之前的请求响应
在ajax请求未响应之前可以使用 xhr.abort() 取消，但如果发出的请求已经到达了服务器，这种终止只是让浏览器不在监听这个请求的响应，服务器端仍然会进行处理。使用 abort() 取消后会进入 error 回调函数
// 定义请求对象
var getCategoryInfoAjax = null;
function getCategoryInfo() {
if (getCategoryInfoAjax) {
// 不为 null 说明之前请求过，需要取消请求
getCategoryInfoAjax.abort();
}
getCategoryInfoAjax = $.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=utf-8",
url: url,
data: param,
success: function (result, testStatus) {
// 也可以在这里判断 ajax 请求是否存在来决定是否执行回调函数
},
complete: function (xhr, xs) {
xhr = null;
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
if (xmlHttpRequest.statusText === 'abort') {
// 说明是主动中断，不作出提示
} else {
layer.msg('失败');
}
}
});
}
缺点：使用封装好的 ajax 方法，如果出现需要多个请求同时进行的情况，那么使用 abort() 取消请求会使其他请求终止。
优点：重复多次请求的情况下，我们可以抛弃之前所有的请求响应，获得最后一次的请求响应。
忽略之前的所有请求，保留最新一次的请求
创建计数器，利用闭包技术来判断是否当前的ajax请求与响应返回是同一批次的。
// 定义计数器
var xhrCount = 0;
function getCategoryInfo() {
var seqNum = ++xhrCount;
getCategoryInfoAjax = $.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=utf-8",
url: url,
data: param,
success: function (result, testStatus) {
if (seqNum === xhrCount) {
// 请求和响应属于同一批次的
} else {
// 不相等说明请求和响应不是同一批次
}
},
complete: function (xhr, xs) {
xhr = null;
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
layer.msg('失败');
}
});
}
避免Ajax多次发送重复请求几种处理方式
发表评论 (审核通过后显示评论)：