一、简单思路

1、定义一个变量加锁

var lock=false;

2、执行Ajax的事件起初处判断

if(lock) {return;}//如果为true就是ajax还在执行中，停止操作
lock=true;//开启

3、在Ajax返回或错误后的回调函数中

lock=false;

二、完整demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决重复调用</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function(){
        var lock = false;
        function ajax() {
            //判断是否正在执行，是则停止操作
            if (lock) {
                //alert("请勿重复提交");
                return;
            }
            lock = true;//开启开关
            //这里为了体现出重复调用，加了3秒个定时器
            setTimeout(function(){
                $.ajax({
                    url: "http://wxcheck.wxjump-api.cn/926pzfzo/wxcheck",//随便找的一个接口
                    dataType: "json",
                    data: {url: "www.lxtian.com"},
                    success: function (data) {
                        console.log("执行成功");
                        lock = false;//结束把开关关掉
                    },
                    error:function(){
                        lock=false;//结束把开关关掉
                    }
                });
            },3000);//3秒内点击多少次，都只执行一次
        }

        $("#btn").on("click", function () {
            ajax();
        })
    })
</script>
<button id="btn">点击</button>

</body>
</html>
© 允许规范转载