原来CSS 也可以节流啊

news2024/7/6 19:54:47

Ⅰ、前言

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