北京市教学名师奖建设项目网站深圳出台科技支持政策
Ⅰ、前言
- 「节流」 是为了减少请求的触发频率，不让用户点的太快，达到节省资源的目的 ；
- 通常 我们采用
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）时间； - ② 可以通过控制台 ，修改样式，绕过节流 ，所以一些重要的功能，不能使用；