按钮点击防暴处理

257 阅读1分钟

概念

通过设置一个标志位来避免在短时间内多次触发事件。

let isBtnClicked=false
function onButtonClick(){
  if(isBtnClicked){
    return
  }
  isBtnClicked=true
  // 点击事件处理逻辑
  setTimeout(()=>{
      isBtnClicked=false
    },1000)//1秒后恢复按钮点击功能
}

为什么不用防抖或节流

  1. 目的不同:防爆处理主要是为了避免用户在短时间内多次点击按钮,从而导致不必要的重复操作。而防抖和节流主要是针对高频触发的事件(如滚动、输入框输入等),通过控制事件处理函数的执行频率来提高性能。
  2. 适用场景不同:防爆处理适用于按钮点击等用户交互事件,这些事件通常不会频繁触发,但需要避免用户误操作。防抖和节流适用于高频触发的事件,如滚动、窗口大小调整、输入框实时搜索等,这些事件在短时间内可能会被触发多次,需要通过控制事件处理函数的执行频率来提高性能。
  3. 实现方式不同:防爆处理通常通过设置一个标志位来实现,当标志位为true时,表示按钮已被点击,不再执行后续操作;当标志位为false时,表示按钮未被点击,可以执行后续操作。而防抖和节流则通过计算时间间隔或者使用定时器来控制事件处理函数的执行频率。