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

巧妙实现防止按钮重复点击
在项目开发中，经常会有防重复点击的优化操作，我们可能会使用以下几种方式来实现：
- 控制按钮的 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）时间；
- ② 可以通过控制台，修改样式，绕过节流，所以一些重要的功能，不能使用；
相关阅读:
mindspore1.5版本下能正常运行到了1.6‘_check_version.py’报错
 WebDAV与FTP的区别
 python自我学习二 05 下载图片链接
 06 【函数（下）】
深度学习-inception模块介绍
 踩坑:Invalid character found in method name. HTTP method names must be tokens
微信小程序-云数据库开发
 Tomact目录结构的介绍
 类似东郊到家上门按摩小程序/包括商家入驻、服务查询、订单管理、用户评价等
 子数组的最小值之和（java）
原文地址：https://blog.csdn.net/u011200562/article/details/133854924

通过css实现截流

利用动画实现 节流

pointer-events 属性

优势

缺点

利用动画实现节流