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

familyAboveAll

防抖和节流目的:都是优化高频率触发执行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)
}))
阅读 2.7k
156 声望
17 粉丝
0 条评论
156 声望
17 粉丝
文章目录
宣传栏