防止重複發送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