【高频考点精讲】防抖和节流的实现原理及业务场景，别再傻傻分不清

防抖和节流的实现原理及业务场景，别再傻傻分不清

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 6 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊前端性能优化中两个高频出现的概念——防抖（Debounce）和节流（Throttle）。很多同学面试时被问到这两个概念，回答得支支吾吾，工作中用起来也是稀里糊涂。今天老李就带大家彻底搞懂它们，从此不再傻傻分不清！

为什么需要防抖和节流？

想象一下这个场景：你在电商网站搜索商品，每输入一个字母就触发搜索请求。用户输入"iPhone 15 Pro Max"，还没输完就发了十几次请求，服务器压力大不说，还可能返回错误的结果。这就是典型的高频触发问题。

防抖和节流就是用来解决这类问题的两种策略，它们都能限制函数执行频率，但适用场景不同。

防抖（Debounce）：等你消停会儿

防抖的核心思想是：等你消停一会儿我再执行。就像老师讲课，总有同学不停地问问题，老师说"等你们没问题了我再继续"，这就是防抖。

代码实现

/**
 * 防抖函数
 * @param {
     
     Function} fn 需要防抖的函数
 * @param {
     
     number} delay 延迟时间(ms)
 * @returns {
     
     Function} 防抖处理后的函数
 * @copyright 全栈老李
 */
function debounce(fn, delay) {
   
   
  let timer = null;
  return function(...args) {
   
   
    // 每次触发都清除之前的定时器
    if (timer) clearTimeout(timer);
    // 重新设置定时器
    timer = setTimeout(() => {
   
   
      fn.apply(this, args);
    }, delay);
  };
}

// 使用示例