前端经典面试题 | 理解 节流 和 防抖(后附手写节流\防抖)

🖥️ 前端经典面试题专栏：前端经典面试题 | 理解节流和防抖
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、回答点

二、深入回答

节流和防抖的理解

防抖应用场景:

节流应用场景:

实现节流和防抖

简易版手撸节流函数

简易版手撸防抖函数

困难版手撸节流函数

困难版手撸防抖函数

---

一、回答点

防抖:事件被触发n秒后执行回调

节流:在规定一个时间段内,只能触发一次事件的回调函数

二、深入回答

节流和防抖的理解

• 防抖:在事件被触发n秒后执行回调,如果在n秒内事件再次被触发,会重新计算时间;可使用在点击事件上,避免用户多次点击向后端发送多次网络请求.
• 节流:在规定一个时间段内,只能触发一次事件的回调函数,如果在这个时间段内事件被多次触发,只会生效一次;可以用在页面滚动等事件监听上,通过节流来降低事件调用的频率.

防抖应用场景:

• 按钮:防止多次点击按钮,只执行一次.
• 服务端:表单验证需服务端进行配合,只执行一段输入的事件的最后一次;搜索框的联想词.

节流应用场景:

• 拖拽:固定时间内只执行一次,防止高频率触发.
• 缩放:监控resize.
• 动画:固定时间内多次触发动画.

实现节流和防抖

简易版手撸节流函数

function throttle(fn, delay) {
  let curTime = Date.now();
 
  return function() {
    let ctx = this,
        args = arguments,
        nowTime = Date.now();
 
    // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - curTime >= delay) {
      curTime = Date.now();
      return fn.apply(ctx, args);
    }
  };
}

简易版手撸防抖函数

function debounce(fn, wait) {
  let timer = null;
 
  return function() {
    let ctx = this,
        args = arguments;
 
    // 如果此时有定时器的话,取消之前的定时器重新记时
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
 
    // 设置定时器,让事件间隔指定时间后执行
    timer = setTimeout(() => {
      fn.apply(ctx, args);
    }, wait);
  };
}

困难版手撸节流函数

function throttle(fn, interval, options = { leading: true, trailing:false }) {
    // 记录开始时间
    const { leading,trailing,resultCallBack } = options
    let endTime = 0
    let timer = null
 
    // 触发,执行函数
    const _throttle = function(...args) {
        return new Promise((resolve, reject) => {
            // 获取当前时间触发的时间
            const newTime = new Date().getTime()
            if (!endTime && !leading) endTime = newTime
            // 使用触发的事件和之前的时间间隔及开始时间,计算出 还剩多长时间需要去触发函数
            const remainTime = interval - (newTime - endTime)
            if (remainTime <= 0){
                if (timer) {
                    clearTimeout(timer)
                    timer = null
                }
                // 触发函数
                const result = fn.apply(this, args)
                if (resultCallBack) resultCallBack (result)
                resolve(result)
                // 保留上次触发时间
                endTime = newTime
                return
            }
            if (trailing && !timer) {
                timer = setTimeout(() => {
                    timer = null
                    endTime = !leading ? 0 : new Date().getTime()
                    const result = fn.apply(this, args)
                    if (resultCallBack) resultCallBack(result)
                    resolve(resolve)
                },remainTime)
            }
        })
    }
 
    _throttle.cancel = function() {
        if(timer) clearTimeout(timer)
        timer = null
        endTime = 0
    }
    return _throttle
}

困难版手撸防抖函数

function debounce(fn, delay, immediate = false, resultCallback) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  let invoke = false
 
  // 2.真正执行的函数
  const _debounce = function(...args) {
    return new Promise((resolve, reject) => {
      // 取消上一次的定时器
      if (timer) clearTimeout(timer)
 
      // 判断是否需要立即执行
      if (immediate && !invoke) {
        const res = fn.apply(this, args)
        if (resultCallback) resultCallback(res)
        resolve(res)
        invoke = true
      } else {
        // 延迟执行
        timer = setTimeout(() => {
          // 外部传入的真正要执行的函数
          const res = fn.apply(this, args)
          if (resultCallback) resultCallback(res)
          resolve(res)
          invoke = false
          timer = null
        }, delay)
      }
    })
  }
 
  // 取消功能
  _debounce.cancel = function() {
    console.log(timer)
    if (timer) clearTimeout(timer)
    timer = null
    invoke = false
  }
 
  return _debounce
}