如果用户频繁点击ajax请求,有两个问题:
- 如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源。
- 更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成混乱。还需要一个队列来维护发送的请求和响应。
直接终止ajax
终止ajax请求:
var request = $.get("ajax.aspx",{id:1},function(data){
//do something
});
//终止请求动作.
request.abort();
防止重复请求:
var request;
if(request != null)
request.abort();
request = $.get("ajax.aspx",{id:1},function(){
//do something
});
如果使用vue,或者react,对于request要定义在data或者state里面。
setTimeout实现 secondTry 在等待一秒之后将firstTry的ajax终止:
var firstTry = $.ajax(
//do something
);
var secondTry = setTimeout(function(){alert('ok');firstTry.abort()},1000);
举例说明:
当用户频繁点击点赞按钮的时候:
data: function () {
return {
status:0,
xhrrequest: null
};
},
methods: {
setLike:function(){
this.doComment({
action: status
},
function (res) {
//回调函数数据处理
}
);
},
doComment: function (opt, callback) {
let _this = this;
//let ajaxUrl = 'http://api.wmpvp.com';
if (_this.xhrrequest != null)
_this.xhrrequest.abort();
_this.xhrrequest = $.ajax({
type: "POST",
url: `${ajaxUrl}/XXXXXXX`,//接口地址
contentType: "application/json",
data: JSON.stringify({
accessToken: _this.isLogin(),
platform: "admin"
}),
dataType: "json",
success: function (res) {
callback && callback(res);
}
});
},
}