防抖&节流

防抖&节流感觉是面试题中提问的最多的

我们来学习下

防抖：在限定时间内，总是执行最后一次。就类似回城，打断就得重新回

节流：在限定时间内，只会执行第一次。就类似技能需要冷却时间到了才能用

防抖

/**
 * @desc 函数防抖
 * @param fn 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
const debounce = function (fn, wait, immediate = false) {
  let timer = null
  return function () {
    let context = this
    let args = arguments
    if (timer) {
      // 触发事件之后，在n秒内函数只能执行一次，如果在n秒内又触发了函数，则会重新计算函数执行事件
      clearTimeout(timer)
   }
    if (immediate) {
      // 立即执行版本
      let callNow = !timer
      if (callNow) {
        fn.apply(context, args)
     }
      timer = setTimeout(() => {
        timer = null
     }, wait)
   } else {
      timer = setTimeout(() => {
        fn.apply(context, args)
     }, wait)
   }
 }
}

节流

/**
 * @desc 函数节流
 * @param fn 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
const throttle = function (fn, wait, type) {
  if (type === 1) {
    let preTime = 0
    return function () {
      let context = this
      let args = arguments
      let nowTime = new Date()
      if (nowTime - preTime > wait) {
        preTime = nowTime
        fn.apply(context, args)
     }
   }
 } else {
    let timer = null
    return function () {
      let context = this
      let args = arguments
      if (!timer) {
        // 当延迟时间结束后，执行函数
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
       }, wait)
     }
   }
 }
}