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)
}))