重復(fù)的ajax請求一波又一波的襲來，服務(wù)器正躲在角落里瑟瑟發(fā)抖，它內(nèi)心是崩潰的，這算是遭了罪了，

　　前端小王子為啥沒有做好限制和封鎖，真是傷不起啊，哎，不如意事常八九，能與人言無二三......

　　以上場景是我們平時在開發(fā)中稍微不注意就會重現(xiàn)的，也因此傷了多少服務(wù)器的心;我們作為前端開發(fā)人員，應(yīng)該正視而且重視這個問題。在這里，給大家提供以下幾種解決方案：

　　1. UI層面的攔截

　　當用戶動了動發(fā)財?shù)男∈贮c擊完按鈕后，就立即禁用按鈕， 并開啟等待動畫，如果收到服務(wù)器的成功響應(yīng)返回后，再隱藏動畫，一定要設(shè)置超時，時間不能太長，如果過長，用戶會罵街的。

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

　　2.showLoading() //顯示動畫

　　3.$.ajax({

　　...

　　timeout: 4000, // 設(shè)置超時時間

　　complete:function(){

　　hideLoading() //隱藏動畫

　　}

　　})

　　2. JS層面的封鎖

　　(1) 暴力點擊

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

　　obtn.onclick = (function(){

　　var timer;

　　return function(){

　　if(timer){

　　clearTimeout(timer)

　　}

　　timer= setTimeout(() => {

　　console.log("ajax發(fā)送; 查詢結(jié)果")

　　}, 500)

　　}

　　})()

　　(2)多tab頁快速切換

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

　　還有一個問題就是，在單頁面應(yīng)用中，切換tab后dom 結(jié)構(gòu)銷毀了，此時數(shù)據(jù)回來了，如果去操作了已經(jīng)銷毀的dom，那么控制臺會報錯。而在vue ，react 等不需要開發(fā)者手動操作的dom的框架，如果我們?nèi)バ薷臓顟B(tài)，還會報出如下的警告信息，這就很難看了。

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

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

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

　　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.');

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