重複的ajax請求讓人很受傷

重複的ajax請求一波又一波地襲來，伺服器正躲在角落裡瑟瑟發抖，它內心是崩潰的，這算是遭了罪了，
前端小王子為啥沒有做好限制和封鎖，真是傷不起啊，哎，不如意事常八九，能與人言無二三……
以上場景是我們平時在開發中稍微不注意就會重現的，也因此傷了多少伺服器的心；我們作為前端開發人員，應該正視而且重視這個問題。在這裡，給大家提供以下幾種解決方案：

1. UI層面的攔截

當用戶動了動發財的小手點擊完按鈕後，就立即禁用按鈕，並開啟等待動畫，如果收到伺服器的成功響應返回後，再隱藏動畫，一定要設置超時，時間不能太長，如果過長，用戶會罵街的。

1.$("#submit").prop("disabled",true); //按鈕禁用

2.showLoading() //顯示動畫

3.$.ajax({
    ... 
    timeout: 4000,  // 設置超時時間
    complete:function(){
        hideLoading() //隱藏動畫
    }
})

2. JS層面的封鎖

(1) 暴力點擊

如果用戶連續暴力點擊按鈕，我們可以通過函數防抖來做，其實就是閉包里的setTimeout 與clearTimeout結合使用, 連續的點擊會把上一次點擊處理函數清掉，我們的 ajax請求會在最後一次點擊後再發出去。

        obtn.onclick = (function(){
            var timer;
            return function(){
                if(timer){
                   clearTimeout(timer) 
                }
                timer= setTimeout(() => {
                    console.log("ajax發送; 查詢結果")
                }, 500)
            }
        })()

(2)多tab頁快速切換

多個tab頁快速切換也是常見的場景，如果用戶從tab1快速切換到tab2，再從tab2快速切換到tab1，不避免的同一個tab 要重複發起多次請求。

還有一個問題就是，在單頁面應用中，切換tab後dom 結構銷毀了，此時數據回來了，如果去操作了已經銷毀的dom，那麼控制台會報錯。而在vue ，react 等不需要開發者手動操作的dom的框架，如果我們去修改狀態，還會報出如下的警告信息，這就很難看了。

解決這個問題的思路就是abort掉上一個請求。XMLHttpRequest對象有abort方法，可以直接調用。

如果使用第三方的請求庫的話，比如axios，我們可以為我們的請求創建一個cancel token ,在每個請求設置一個token，在頁面切換，或者組件銷毀前，只需要通過source.cancel取消就好了，其實原理還是通過xhr的abort方法實現。

具體的代碼以及流程可以參考如下。

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');