①CSS 实现思路分析:需要对点击事件进行限制,也就是禁用点击事件pointer-events;
②CSS 实现的其他思路:通过:active去触发transition变化,然后通过监听transition回调去动态设置按钮的禁用状态。这样做的最大好处是,这部分禁用的逻辑是完全和业务逻辑是解耦的,可以在任意时候,任意场合下无缝接入,也不受框架和环境影响;
③总结一下:
1、函数节流是一个非常常见的优化方式,可以有效避免函数过于频繁的执行;
2、CSS 的实现思路和 JS 不同,重点在于在于找到和该场景相关联的属性;
3、CSS 实现“节流”其实就是控制一个动画的精准控制,假设有一个动画控制按钮从禁用->可点击的变化,每次点击时让这个动画重新执行一遍,在执行的过程中,一直处于禁用状态,这样就达到了“节流”的效果;
4、还可以通过 transition 的回调函数动态设置按钮禁用态;
5、这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
(参考:mp.weixin.qq.com/s/nW7LfuAv6…