防止重復發送Ajax請求問題

在工作中有很多場景需要通過Ajax請求發送數據，像是注冊、登錄、提交用戶反饋等。用戶在點擊了“確認”按鈕之后有可能一段時間內沒有收到反饋頁面無任何反應，然后就接着連續多次點擊“確認”按鈕導致發送n個重復的請求，給服務器造成不小壓力。

從前端解決重復發送請求的方法是有的。

1、點擊“確定”之后禁用該按鈕

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

　　

2、使用變量進行上鎖

思路如下：聲明變量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;
                }
            })
        });
    });

　　

3、設置時間，在規定時間內不允許再次發送請求

和方法二類似，不同點在於決定是否可以再次發送求情的條件是是否超過規定時間（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