zepto Ajax 废除一个ajax请求

最新推荐文章于 2021-03-23 08:04:47 发布

李不烦

最新推荐文章于 2021-03-23 08:04:47 发布

阅读量352

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/99698228

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

如何废除一个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后返回结果
});