防抖和节流

• 1 防抖
  • 1.1 定义
  • 1.2 举例
  • 1.3 防抖函数
  • 1.4 防抖函数及调用
• 2 节流
  • 2.1 定义
  • 2.2 举例
  • 2.3 节流函数
  • 1.4 节流函数及调用
• 3 总结

1 防抖

1.1 定义

防抖，延迟执行（当连续触发某事件时，不会立即执行，只有一定时间没有再触发才执行）

1.2 举例

比如：用户搜索的时候，输入文字一直调用api，给服务器造成很大的压力，这个时候就需要做防抖处理，等用户输完，不再输入（比如500ms没输入），这个时候再发起请求。

1.3 防抖函数

请参考：https://blog.csdn.net/qq_39908328/article/details/124151069

1.4 防抖函数及调用

//创建一个防抖函数debounce
function debounce(fn, delay, immediate = false, resultCallback) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  let isInvoke = false
  // 2.真正执行的函数
  const _debounce = function (...ages) {
      // 取消上一次的定时器
      if (timer) clearTimeout(timer)

      // 判断是否需要立即执行
      if (immediate && !isInvoke) {
        const result = fn.apply(this, ages)
        isInvoke = true
        resultCallback(result)
      } else {
        // 延迟执行
        timer = setTimeout(() => {
          // 外部传入的真正要执行的函数
          const result = fn.apply(this, ages)
          resultCallback(result)
          isInvoke = false
        }, delay)
      }
  }

  //_debounce是一个函数，函数也可以做为是一个对象，所以我们可以给他添加方法
  _debounce.cancel = function () {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }

  return _debounce
}

// 自己需要执行的函数
function myFun(e){
  console.log('input', e)
}

// 用防抖函数调用
输入框.oninput = debounce(myFun, 1000);

2 节流

2.1 定义

节流，立即执行，节流周期中重复触发也不再执行。

2.2 举例

比如：用户下拉加载更多的时候，如果不做节流，会频繁请求，如果进行节流处理，那么第一次会发起请求，然后再设置一个等待期（比如500ms），那这个等待期没结束的话，再次发起请求都不处理。

2.3 节流函数

请参考：https://blog.csdn.net/qq_39908328/article/details/124151069

1.4 节流函数及调用

function throttle(fn, interval, options = { leading: true, trailing: false }) {
  // 1.记录上一次的开始时间
  const { leading, trailing } = options
  let lastTime = 0
  let timer = null

  // 2.事件触发时, 真正执行的函数
  const _throttle = function (...args) {
    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    if (!lastTime && !leading) lastTime = nowTime

    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      //进入到这我们肯定会调用函数的，所以需要防止重复调用
      if (timer) {
        clearTimeout(timer)
        timer = null
      }

      // 2.3.真正触发函数
      fn()

      // 2.4.保留上次触发的时间
      lastTime = nowTime
      return
    }

    //判断是否需要执行最后一次输出
    if (trailing && !timer) {
      timer = setTimeout(() => {
        timer = null
        //防止我们延迟调用函数时，上面时间到了后，又重复调用
        lastTime = !leading ? 0 : new Date().getTime()
        fn()
      }, remainTime)
    }
  }

  return _throttle
}

// 自己需要执行的函数
function myFun(e){
  console.log('scroll', e)
}

// 用防抖函数调用
Window.onscroll = throttle(myFun, 1000);

3 总结

总之，防抖是延迟执行，节流是立即执行