js基础巩固,防抖节流手写简化版

115 阅读1分钟

1.防抖的原理: 在事件被触发的一定时间内,如果再次被触发,那么这个时间重新计时,执行函数只执行最后一个

const fangDou=(fn,delay)=>{
  let timeId = null
  return(...obj)=>{
    clearTimeout(timeId)
    tiemId = setTimeout(()=>{
      fn.apply(this,obj)
     },delay)
   }
 }

适应于按钮提交,服务验证等只需要取一次结果的场景,防止多次提交

2.节流的原理: 再规定的一个单位时间里,只能触发一次珊瑚,如果这个函数被触发多次,只生效一次

const jieliu = (fn,delay = 1000)=>{
    let falg = true
    return (...obj)=>{
    if(!falag) return
    falg = false
    setTimeout(()=>{
    fn.apply(this,obj)
    falg = true
   },delay)
  }
}

适用于拖拽多次触发位置移动的场景,减少触发频率

代码多有借鉴,还需多多自己学习理解