防止重复发送Ajax请求问题

在工做中有不少场景须要经过Ajax请求发送数据，像是注册、登陆、提交用户反馈等。用户在点击了“确认”按钮以后有可能一段时间内没有收到反馈页面无任何反应，而后就接着连续屡次点击“确认”按钮致使发送n个重复的请求，给服务器形成不小压力。

从前端解决重复发送请求的方法是有的。

一、点击“肯定”以后禁用该按钮

  <input type="button"  id="submit-btn">
        <script>
    var btn=$("#submit-btn");
    btn.onclick=function(){
        btn.attr('disabled',true)
    }
</script>

　　

二、使用变量进行上锁

思路以下：声明变量lock，当lock值为true，禁止再次发送请求，当lock值为false，能够发送请求。在Ajax返回success或者error的回调函数中将lock置为false，也就是说只有当服务器给出响应以后才能够再次发送请求。

 var lock=false; //
    $('#msg').click(function(){
        if(lock) return;
        lock=true;
        setTimeout(function(){
            $.ajax({
                url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=wise_web',
                type:'get',
                data:{
                    'wd':'c'
                },
                jsonp:'cb',
                jsonpCallback:'jshow',
                dataType : 'jsonp',
                success:function(res){
                    lock=false;
                    console.log(res)
                },
                error:function(){
                    lock=false;
                }
            })
        });
    });

　　

三、设置时间，在规定时间内不容许再次发送请求

和方法二相似，不一样点在于决定是否能够再次发送求情的条件是是否超过规定时间（3s、5s或其余时间）。

在最开始，声明变量lock=false。点击“肯定”按钮，触发请求并将lock置为true。在规定时间以后（以3s为例）将lock置为false，此时就能够再次发送请求了。

var lock=false;
$btn.on('click',function(){
    if(lock){
        return;
    }
    lock=true;
    setTimeOut(function(){
        lock=false;
    },3000) // 3s后将lock设置为false, lock为false时就能够再次发送请求了。。。。。。
    $.ajax({
        type:'post',
        url:'/getdata/info/item.php',
        dataType:'json',
        data:'data',
        success:function(){
            ....... //xxx操做
        },
        error:function(){
            ...... // xxx操做
        }
    })

　　

固然，具体问题具体分析。结合实际问题适当调整思路才能找到更好的解决方法。

转载：https://blog.csdn.net/jianglittlebai/article/details/79090194