在前端開發的過程中，如果沒有注意限制和封鎖經常會出現很多重複的ajax請求，導致伺服器壓力很大。今天小千就來給大家提供幾個解決方案，看到就是賺到。

1. UI層面的攔截

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

2. JS層面的封鎖

(1) 暴力點選

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

(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方法實現。

具體的程式碼以及流程可以參考如下：

不同的使用場景，我們可以靈活的組合以上的解決方案，不知道這樣做的話，是否能挽回伺服器的心，我又想起了夕陽下的奔跑，那是我與伺服器美好邂逅，也是我們逝去的青春......