1.每当需要取消之前发出的请求时,需要调用clearRequestId方法。 2.在优化版本中,显式定义了两种取消请求的方法,clearFormerRequest和clearFormerRequestBeforeRequest,后者用于在发送新的请求前使用,前者是没有发送新的请求,而是通过其他操作取消了请求,比如点击取消按钮。
/*
通过id来跟踪请求和判断返回是否有效
*/
function CommonRequestIdManager() {
if (!(this instanceof CommonRequestIdManager)) {
return new CommonRequestIdManager();
}
// 是否已經取消了請求,如果是,則新建請求之前不需要再自增requestId
this.hasCanceled = false;
// 是否已經發送過請求
this.haveEverMakeRequest = false;
this.initRequestId();
}
CommonRequestIdManager.prototype = {
// id初始化
initRequestId: function() {
this.requestId = 1;
},
// 获取该次请求对应的id
getRequestId: function() {
return this.requestId;
},
// 清除请求的id,把id加一,导致前面发出的请求不可用,用於沒有發送新請求,但是通過其他操作取消了請求,比如點擊取消按鈕
clearFormerRequest: function() {
this.hasCanceled = true;
this.addRequestId();
},
/*
清除请求的id,把id加一,导致前面发出的请求不可用,用於發送新請求之前使用,
如果已經通過其他操作取消了請求,或者還沒有發送過請求,則不需要再自增requestId。
*/
clearFormerRequestBeforeRequest: function() {
if (!!this.hasCanceled || !this.haveEverMakeRequest) {
return;
}
return this.addRequestId();
},
addRequestId: function() {
return this.requestId++;
},
// 获取当前的请求id
getCurrentRequestId: function() {
return this.getRequestId();
},
// 获取该次请求对应的回调
getCb: function(cb,context) {
var self = this;
var requestId = this.getRequestId();
// 每次新發送請求之前重置標記位
this.hasCanceled = false;
this.haveEverMakeRequest = true;
console.log(requestId)
return function(data) {
// 对于返回的结果,判断回调函数绑定的id是否等于当前的请求id
if (requestId === self.getCurrentRequestId()) {
cb && cb.call(context || null, data);
}
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title>my login</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<script type="text/javascript" src="./CommonRequestIdManager.js"></script>
<body>
<input type="text" name="name">submit
<script type="text/javascript">
var commonRequestIdManager = new CommonRequestIdManager();
$('input').on('keydown', function() {
// 清除前面发出的所有请求
commonRequestIdManager.clearRequestId();
$.ajax({
url: '1.php',
success:commonRequestIdManager.getCb(function() {
console.log('success')
}),
error:commonRequestIdManager.getCb(function() {
console.log('error')
})
})
})
</script>
</body>
</html>