最近幾天，測試在檢測我頁面功能時，瘋狂點擊帶接口請求的按鈕，然后就會發起無數次請求，然后app就卡住了。當看到這個問題的時候，心里瘋狂鄙視測試（開個玩笑），一開始想的到解決方案是用函數防抖，使用函數防抖之后效果是有了，但發現用戶體驗很差，用戶點擊多下時卻一直沒有反應，就會給用戶錯覺這個按鈕點擊無效。因為函數防抖的原理是指頻繁觸發的情況下，只有足夠的空閑時間，才執行代碼一次。比如生活中的坐公交，就是一定時間內，如果有人陸續刷卡上車，司機就不會開車。只有別人沒刷卡了，司機才開車。，再執行函數內部代碼。好吧，說到函數防抖，可能有些小伙伴之前沒用過，舉個簡單的例子，大神忽略哈。hh~~
先看沒有用函數防抖的代碼：
再來個使用函數防抖的代碼：
使用函數防抖，解決了點擊多次的問題，但我想小伙伴也看出來了，如果一直點擊的話，頁面沒有任何提示，體驗感很不好。然后去網上百度了一下，發現了css的pointer-events屬性。
此刻推薦大家去看看張大大寫的這篇文章：https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
更改代碼：
為了方便查看效果，加了一個Loading動畫，看起來更直觀。
注：這個元素我只是用於html沒有自帶禁用點擊事件的元素，對某一個元素比如div采用div{pointer-events:none}即可讓這個HTML元素（包括它的所有子孫元素）失去所有的事件響應。鼠標焦點會直接無視它，click、mouseover等所有事件會穿透它到達它的下一級元素。並且使用如果小伙伴使用的表單元素，就直接用disabled吧 -.-
前端學習永無止境，寫的不對的地方希望大佬指點一下，也歡迎小伙伴前來分享。