JavaScript中防抖和节流的区别及适用场景

前言

在前端开发中，防抖和节流是两个常被提及且极易混淆的概念。它们的主要目的都是在用户操作过于频繁时，减少函数被执行的次数，从而保护浏览器资源，避免卡顿或服务器压力过大。理解它们的区别对于编写高质量的前端代码至关重要。

防抖（Debounce）

概念与示例

防抖的核心思想是“延迟执行”。即当调用动作后，等待一段时间再执行。如果在这段等待时间内又调用了动作，则重新计时。只有当用户停止操作达到指定时间后，函数才会真正执行。

典型场景：搜索框输入。用户在输入时，不需要每次按键都发起请求，而是等用户停止输入后（例如500毫秒内无新输入），才向服务器发送搜索请求。

代码演示

function debounce(fn, delay = 200) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    // 如果定时器存在，说明上次触发的任务还没执行，清除它并重新开始倒计时
    if (timer) {
      clearTimeout(timer);
    }
    // 设置新的定时器
    timer = setTimeout(() => {
      fn.apply(context, args);
      timer = null;
    }, delay);
  };
}

节流（Throttle）

概念与示例

节流的核心思想是“频率限制”。即单位时间内，函数只能执行一次。无论事件触发多么频繁，在指定的时间间隔内，只保证执行一次。

典型场景：窗口resize、scroll滚动。这类事件会极其频繁地触发，如果使用防抖，直到用户停止滚动/缩放才会执行回调，可能导致最后一瞬间产生巨大的计算量或视觉延迟。使用节流则可以保证每隔一定时间（如100ms）执行一次，既控制了频率，又保证了反馈的及时性。

代码演示

function throttle(fn, delay = 200) {
  let timer = null;
  return function () {
    const context = this;
    const args = arguments;
    // 如果定时器存在，说明当前时间片内已经执行过或正在等待执行，直接返回
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(context, args);
      timer = null;
    }, delay);
  };
}

核心区别对比

从代码逻辑上看，两者的结构非常相似，都使用了闭包和定时器，但关键的判断逻辑截然不同：

• 防抖：在定时器已存在时，clearTimeout(timer)。目的是取消之前的预定任务，确保只执行最后一次操作后的回调。
• 节流：在定时器已存在时，return。目的是丢弃本次触发，强制等待上一个时间段结束，确保每段时间至少执行一次。

总结

简单记忆：

• 防抖（Debounce）：动作频繁发生时，只关注最后一次的执行。适用于搜索联想、表单校验等。
• 节流（Throttle）：动作频繁发生时，限制执行频率，保证均匀输出。适用于滚动加载、鼠标移动追踪等。

以上就是JavaScript中防抖和节流的区别及适用场景的详细内容，更多关于JS防抖和节流的资料请关注本站其它相关文章！