乐趣区

js节流和防抖的实现及应用场景

防抖和节流目的:都是优化高频率触发执行 js 代码的一种手段

防抖

触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,那么就会重新计算时间

实现:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法
缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟

应用场景

1. 输入框搜索:一般的输入框绑定输入事件,每次触发就要请求接口的话,会给服务器带来巨大的压力,所以会用到防抖
规定时间为 200ms,当输入后 200ms 没有操作,才会触发接口
2. 窗口 resize。只需窗口调整完成后,计算窗口大小。防止重复渲染

function debounce (fn) {
  let timerout = null
  return function () {
    let args = arguments
    let self = this
    clearTimeout(timerout)
    timerout = setTimeout(() => {fn.apply(self, args) // 传参数
    }, 200);
  }
}
window.addEventListener('scroll', debounce(function () {console.log(1)
}))

节流

规定在 n 秒内,只能触发一次函数。如果在 n 秒内触发多次函数,只有一次生效

实现:当触发事件时,判断有没有正在执行的函数,直接 return

应用场景

1. 高频点击提交,表单重复提交

function throttle (fn) {
  let timerout
  return function () {
    let args = arguments
    let self = this
    if (timerout) return
    timerout = setTimeout(() => {fn.apply(self, args)
      timerout = null 
    }, 200);
  }
}
window.addEventListener('resize', throttle(function () {console.log(1)
}))
退出移动版