当前位置：首页 > news >正文

原来CSS 也可以节流啊

news 2025/8/28 14:05:02

Ⅰ、前言

「节流」是为了减少请求的触发频率，不让用户点的太快，达到节省资源的目的；
通常我们采用 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>