利用css动画实现节流的介绍

节流指的避免过于频繁的执行一个函数，例如：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，不然会频繁的请求接口，之前基本上是通过js去控制节流问题，其实css也能做到节流

一、 css 实现思路（需要用到 pointer-events、animation以及:active）

1. 对点击事件进行限制，也就是禁用点击事件，利用pointer-events
   1. pointer-events 属性用于设置元素是否对鼠标事件做出反应。
   2. 值：none 不做反应auto 默认值
2. 利用动画animation，去改变当前按钮是否可点击
3. 利用伪类 :active 触发按钮时机，就是点击行为

作用：实现按钮节流，利用css动画的控制，比如一个动画控制按钮从禁用-》可点击的变化，每次点击都让动画重新执行一次，就能达到节流的效果

实现方式：

首先利用animation写一个禁用开启的动画

1 2 3 4 5 6 7 8

@keyframes cssThrottle {   from {      pointer-events: none;   }   to {       pointer-events: all;   } }

其次：把动画绑定到按钮上（设置延迟3s）

1 2 3

button {      animation: cssThrottle 3s step-end forwards; }

animation的 相关属性

• step-end=》 steps(1, end)
• step-start =》 steps(1, start)

step() 表示过度的情况
比如steps(5, end)，表示把我们的动画分成了多少等分end表示从开始的时候就执行，最后那段被忽视，start则相反

forwards end时表示最后那一段就交给forwards处理，就是第五段

二、利用监听css的 transition 达到节流效果

通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态

1 2 3 4 5 6 7 8

button{   opacity: .99;   transition: opacity 2s; } button:not(:disabled):active{   opacity: 1;   transition: 0s;  }

然后监听transition的起始回调

1 2 3 4 5 6 7 8

// 过渡开始 document.addEventListener('transitionstart', function(ev){    ev.target.disabled = true }) // 过渡结束 document.addEventListener('transitionend', function(ev){    ev.target.disabled = false })

注意：这两种的话，安全性不高，可以通过 ui层面去绕开