JS实现节流-防止重复点击按钮

最近工作中碰到了一个需求，不允许用户多次点击提交按钮，刚开始的想法是传递一个属性，请求接口的时候设为false，请求成功后设为true，但由于项目已经有一定的规模了，这样做的改动很大。后来发现，不允许多次点击提交也就是说一定的时间内只允许执行一次函数，这不就是节流嘛。由于我们的组件是基于element ui封装的，只要在封装的button组件内部加上节流，一定时间内只能emit一次点击事件就好了

 const throttleHandle = throttle(() => context.emit('click'), 2000)

好了，下面开始写节流函数
节流可以这样理解：玩游戏的时候人物释放技能后，技能进入冷却时间，冷却时间内不允许释放技能，冷却时间过后可以再次释放技能。
假设需要执行的函数 fn 就是技能，冷却时间是 delay，是否在冷却时间内用 cd 表示。 当不处于冷却时间时（cd=false），此时可释放技能（执行函数fn），释放完节技能后技能进入冷却时间（cd=true）

 let cd = false
 if (!cd) {
   fn()
   cd = true
 }

冷却时间过后(cd=false)，技能可再次释放，这里使用setTimeout实现

 timer = setTimeout(function () {
   cd = false
 }, delay)

执行函数的时候要清理定时器，完整代码如下

const throttle = (fn: any, delay: number) => {
  let cd = false
  let timer: any = null

  return function () {
    if (!cd) {
       fn()
       cd = true
       clearTimeout(timer)

       timer = setTimeout(function () {
         cd = false
       }, delay)
     }
   }
}

还有一种通过CSS实现节流的也很好用，这里做个记录，详细内容请看原帖：juejin.cn/post/716582…

button { animation: throttle 2s step-end forwards; }
button:active { animation: none; }
@keyframes throttle { from { pointer-events: none; } to { pointer-events: all; } }