在项目开发中，经常会有防重复点击的优化操作，我们可能会使用以下几种方式来实现：
- 控制按钮的 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）时间； - ② 可以通过控制台 ，修改样式，绕过节流 ，所以一些重要的功能，不能使用；
![[C++]:1.初识C++和C语言缺陷补充。](http://pic.xiahunao.cn/[C++]:1.初识C++和C语言缺陷补充。)
)
