web前端基礎教程：防止重複發送ajax請求的思索

　　防止重複發ajax請求是平時開發中遇到頻次較高的問題了。我一般解決方案有以下幾種，

　　一、UI限制

點擊完按鈕後，就禁用按鈕， 並開啓顯示等待動畫，收到服務器的成功響應後，再隱藏動畫，最好設置超時，時間不要太長，若是太長，用戶會罵街。

　　圖片來自網絡

　　二、JS封鎖

　　(1)、若是用戶屬於暴力連續點擊按鈕，能夠經過函數防抖來作，其實就是閉包裏的setTimeout 與clearTimeout, 連續的點擊會把上一次點擊處理函數清掉，咱們的ajax請求會在最後一次點擊後再發出。

(2)、多個tab 快速切換，若是從tab1快速切換到tab2，再從tab2快速切換到tab1，不避免的同一個tab 要重複發起屢次請求。除了屢次請求的問題，還有一個問題就是，若是在單頁面應用中，切換tab後dom 銷燬了，此時數據回來了，若是去操做了已經銷燬的dom，那麼控制檯會報錯。而在vue ，react 等不須要開發者去操做的dom的框架，咱們去修改狀態，也會報出以下的警告信息：

　　解決這個問題的思路就是abort掉上一個請求。XMLHttpRequest對象有abort方法，能夠直接調用。若是使用第三方的請求庫的話，好比axios，咱們能夠爲咱們的請求建立一個cancel token ，在每一個請求設置一個token，在頁面切換， 或者組件銷燬前，經過source.cancel取消就行了，其實原理仍是經過xhr的abort方法實現。具體的代碼以及流程能夠參考以下：

　　

　　固然最終解決這個問題仍是要根據場景，靈活選擇，要有本身的freestyle。