Ⅰ、前言
- 「节流」 是为了减少请求的触发频率，不让用户点的太快，达到节省资源的目的 ；
- 通常 我们采用
JS的 定时器setTimeout，来控制点击多少秒才能在触发； - 其实 通过
CSS也能达到 「节流」 的目的，下面我们来看一下把 👇
Ⅱ、用CSS 节流
1、pointer-events 属性
**属性值 ：
all / none
**
all: 可以触发该元素绑定的监听事件 ；none: 无法触发绑定的监听事件 ；
<style>.btn{pointer-events: none;}</style><body><buttonclass="btn"onclick="btnClick()"> 按钮 </button></body><script>functionbtnClick(){ console.log(123)}</script>
- 清楚可以发现事件「无法触发」
既然如此 ，我们可以通过 点击后 动画（
animation
）, 来设置多少秒后可以触发
2、利用动画实现 节流
- 通过
active鼠标点击的时候，清空动画 - 鼠标松开时，重新启动动画 （
2s以后才能触发onclick事件）
<style>.btn{pointer-events: all;animation: btnAnim 2s step-end forwards;}.btn:active{animation: none
}@keyframes btnAnim{from{pointer-events: none;}to{pointer-events: all;}}</style><body><buttonclass="btn"onclick="btnClick()"> 按钮 </button></body><script>functionbtnClick(){ console.log(123)}</script>
3、优势和缺陷
优势 ：
- ① 十分 简单，不需要操作 JS ；
- ② 可以发挥
CSS「选择器」 的优势，批量 设置「节流」；
缺点：
- ① 页面刚进入，也要等动画 （
animation）时间； - ② 可以通过控制台 ，修改样式，绕过节流 ，所以一些重要的功能，不能使用；
本文转载自: https://blog.csdn.net/weixin_42232622/article/details/128319491
版权归原作者 野生切图仔 所有， 如有侵权，请联系我们删除。
版权归原作者 野生切图仔 所有， 如有侵权，请联系我们删除。