js：如何优雅的实现按钮防重复

按钮防重复一般就几个方案

• 节流
• 变量控制

我这里是优化版的变量控制，并且封装了一个 npm 包

思路

index.js

let canRun = true
const preventRepeatClick = (fn, delay, ...data) => {
  if (canRun) {
    fn(data)
  }
  canRun = false
  setTimeout(() => {
    canRun = true
  }, delay || 500)
}

export default preventRepeatClick

使用：

import preventRepeatClick from '../index.js'
function submit() {
  console.log('提交成功')
}
document.getElementById('button').onclick = () => {
  preventRepeatClick(submit)
}

完美解决！