Ⅰ、前言
- 「节流」 是为了减少请求的触发频率，不让用户点的太快，达到节省资源的目的 ；
- 通常 我们采用
JS的 定时器setTimeout，来控制点击多少秒才能在触发； - 其实 通过
CSS也能达到 「节流」 的目的，下面我们来看一下把 👇
Ⅱ、用CSS 节流
1、pointer-events 属性
属性值 ：all / none
all: 可以触发该元素绑定的监听事件 ；none: 无法触发绑定的监听事件 ；
<style>
.btn {
pointer-events: none;
}
</style>
<body>
<button class="btn" onclick="btnClick()"> 按钮 </button>
</body>
<script>
function btnClick(){ 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>
<button class="btn" onclick="btnClick()"> 按钮 </button>
</body>
<script>
function btnClick(){ console.log(123) }
</script>
3、优势和缺陷
优势 ：
- ① 十分 简单，不需要操作 JS ；
- ② 可以发挥
CSS「选择器」 的优势，批量 设置「节流」；
缺点：
- ① 页面刚进入，也要等动画 （
animation）时间； - ② 可以通过控制台 ，修改样式，绕过节流 ，所以一些重要的功能，不能使用；
