防抖

防抖目的是为了短时间内多次触发事件,但只执行一次

let timer  // 如果是vue的可以在data里面定义

function handleClick() {
  clearTimeout(timer)
  timer = setTimeout(() => {
        要执行的代码放在此处
      }, 300) // 300毫秒重复点击,只触发一次
}

场景二:有时候点击删除多次点击会出现同个id删除后面的接口会报错

解决办法一:是用上面的防抖

解决办法二:

let loading=false

function handleDelete(id) {
  if(loading) return
  loading = true
 //下面写接口回调,调完接口后将loading恢复false
}

二者方法的效果一样,前者是最后次事件执行,后者是第一次事件执行,后面的事件锁住不执行

个人比较喜欢第二种,实际效果也更好