zepto Ajax 废除一个ajax请求
程序员文章站
2022-05-03 21:33:55
...
如何废除一个ajax请求 ----abort()方法
需求/场景：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
然后因为网速好或者其他原因，两次请求同时返回，该怎么解决
disabled属性 设置表单项或者按钮不可再点击或者操作；但是只是针对click事件，而并没有针对touch事件作出处理。
客户端请求：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>ajax容易忽视的重点</title>
<style type="text/css">
#btn{
width: 200px;
height: 200px;
background: red;
border-radius: 20px;
text-align: center;
line-height: 200px;
font-size: 30px;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
var xmlHttp = null;//初始化xmlHttp对象
var isSend = false;//初始化判断按钮是否可以点击
$('#btn').on('touchstart', function () {
if(isSend === true){//如果不能点击，直接返回
return;
}
$(this).css('background', 'gray');
isSend = true;//修改为不能点击
if(xmlHttp === null){//如果用户首次点击，发送请求
xmlHttp = sendXmlHttp();
}else{
//10s后用户没收到验证码，再次点击，再次点击的时候取消上一次请求
xmlHttp.abort();
xmlHttp = sendXmlHttp();//再次发送最新的请求
}
setTimeout(function () {
$('#btn').css('background', 'red');
isSend = false;//10s以后用户可以再次点击
}, 10000);
});
//发送ajax请求的函数;
function sendXmlHttp() {
var xmlHttp = null;
xmlHttp = $.ajax({
type : 'GET',
url : 'http://localhost:3000/',
dataType : 'json',
success : function (msg) {
console.log(msg);
},
error : function (error) {
console.log(error);
}
});
console.log("xmlHttp:"+xmlHttp)
return xmlHttp;
}
});
</script>
</body>
</html>
服务端：
router.get('/', function(req, res, next) {
var arr = [1,2,3,4,5];//模拟数据
res.set('Access-Control-Allow-Origin','*');
setTimeout(function () {
res.send(arr);
},15000); //模拟网络缓慢 15s后返回结果
});
上一篇： Java字节码增强探秘