前端中预防多次重复事件

想到防止重复事件，想到的的一个是防抖节流函数，其可以有效防止重复事件。但用css也可以很简单的解决这个问题

一个按钮为了避免重复提交或考虑服务器容载问题，往往需要考虑对点击行为进行限制，就比如500ms提交，这个时候大家往往去网页搜索防抖节流cv一下，接下来的方法可以简单记住，还能更加直观的观看限制过程。

我们要对点击事件进行限制，而css中有个pointer-events可以对需要的点击事件进行限制，然后就是防止重复，对时间的把握，就是禁用一段时间后恢复，这个时候就想到了动画，用animation，或者transition。而还需要有个伪元素去出发点击事件，那就是：active

这种场景就是，对css的动画控制，从禁用到可点击的过程变化，每次点击时动画执行一次，而执行过程中就是处于禁用状态，这就达到了节流的效果

所以我们将他们串联起来就有，点击时出发原有事件后，对其禁用2s,后恢复正常。

用animation，设置有个动画名称就叫throttle

用一个按钮绑定一个点击事件，根据动画设置，将其按钮设置成禁用到可点击的过程。animation设置动画的缓动函数阶梯曲线step-end，即pointer-events变化时间点，而forwards就是会一直保持all，动画结束这个状态。