巧妙实现防止按钮重复点击

巧妙实现防止按钮重复点击
在项目开发中，经常会有防重复点击的优化操作，我们可能会使用以下几种方式来实现：
- 控制按钮的 loading 参数
- 在每个需要防止重复点击的按钮操作上，使用 throttle 函数
- 封装一个公共的按钮组件，在需要的地方使用
- 通过css实现截流
利用动画实现节流
- 通过 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>
```
pointer-events 属性

属性值：all / none
- all : 可以触发该元素绑定的监听事件；
- none : 无法触发绑定的监听事件；
优势
- ① 十分简单，不需要操作 JS ；
- ② 可以发挥 CSS 「选择器」的优势，批量设置「节流」；
缺点
- ① 页面刚进入，也要等动画（animation）时间；
- ② 可以通过控制台，修改样式，绕过节流，所以一些重要的功能，不能使用；
相关阅读:
基础 | JVM - [hashcode & 一致性 hash & ==]
Elasticsearch：不用高深的数学知识来理解 LLMs 是如何工作的
 力扣1482.制作m束花所需的最少时间
 VSCode配置 C/C++ 环境
 （科目三）数据库基础知识
 数据分析--数据预处理
 每个程序员必须掌握的常用英语词汇
 GIS工具maptalks开发手册(二)01——渲染点、文字和图片
 Java开发学习(二十九)----Maven依赖传递、可选依赖、排除依赖解析
 翻译软件有哪些-翻译软件大家都推荐使用的有哪些
原文地址：https://blog.csdn.net/u011200562/article/details/133854924

通过css实现截流

利用动画实现 节流

pointer-events 属性

优势

缺点

利用动画实现节流