最近几天，测试在检测我页面功能时，疯狂点击带接口请求的按钮，然后就会发起无数次请求，然后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吧 -.-
前端学习永无止境，写的不对的地方希望大佬指点一下，也欢迎小伙伴前来分享。