JS函数节流原理与实现方法解析

在前端性能优化中，**JS函数节流**是一项关键技术。本文深入解析函数节流的实现方法，**函数节流**旨在限制函数在单位时间内仅执行一次，与防抖不同，节流采用“定时定量”策略，适用于滚动事件、窗口缩放等需周期性响应的场景。文章剖析了基于`setTimeout`的基础节流实现，并进一步探讨了包含`leading`（首次立即执行）和`trailing`（末次补执行）选项的健壮版本，以及`cancel`方法，以实现更灵活的控制。掌握**函数节流**，能够有效提升Web应用的性能和用户体验，避免因高频事件触发而导致的卡顿现象。本文将带你从原理到实践，全面掌握这一前端优化利器。

函数节流的核心是限制函数在单位时间内只能执行一次，常用于优化高频事件的性能。与防抖不同，节流采用“定时定量”执行策略，无论事件触发多频繁，每隔一段时间必定执行一次，适用于需要周期性响应的场景。防抖则等待事件流停止后才执行，适合只关注最终状态的操作。节流典型应用场景包括滚动事件（如懒加载、滚动加载）、窗口缩放、鼠标移动（如拖拽、绘图）和按钮防重复点击等。一个基础节流实现使用setTimeout配合标志位控制执行频率，而更健壮的版本支持leading（首次立即执行）和trailing（末次补执行）选项，并提供cancel方法以手动清除状态，确保灵活性和可控性。因此，掌握节流技术是前端性能优化的关键技能之一。

函数节流，简单来说，就是限制一个函数在特定时间内只能执行一次。它不像防抖那样是等事件完全停止才执行，节流更像是“定时定量”地执行，不管事件触发多频繁，我每隔一段时间就处理一次。这在很多需要控制执行频率的场景下，能显著提升页面性能和用户体验。

解决方案

实现函数节流的核心思路，是利用一个定时器或者时间戳来控制函数的执行频率。最常见的做法是使用一个标志位或者一个定时器ID，确保在设定的延迟时间内，函数不会被重复执行。

这是一个基于setTimeout的简单实现，它会确保函数在指定时间间隔内，只在最后一次触发后执行（也就是所谓的“尾部执行”）：

function throttle(func, delay) {
  let timeoutId = null; // 用于存储定时器ID

  return function(...args) { // 返回一个新函数，接收所有参数
    // 如果当前没有正在等待执行的定时器
    if (!timeoutId) {
      // 设置一个定时器
      timeoutId = setTimeout(() => {
        // 定时器触发时，执行原始函数，并确保this上下文和参数正确传递
        func.apply(this, args);
        // 执行完毕后，清除定时器ID，允许下一次节流触发
        timeoutId = null;
      }, delay);
    }
  };
}

// 示例用法：
// const handleScroll = throttle(() => {
//   console.log('滚动事件被节流了！');
// }, 200);
// window.addEventListener('scroll', handleScroll);

这个实现相对简洁，它的逻辑是：当函数被调用时，如果当前没有待执行的定时器，就设置一个。在定时器期间，即使函数被多次调用，也不会设置新的定时器。只有当定时器执行完毕，timeoutId被重置为null后，才能再次设置定时器。

函数节流和防抖有什么区别？什么时候用节流，什么时候用防抖？

说实话，刚开始接触函数优化时，节流和防抖常常让我混淆。它们确实都是为了优化高频事件处理，但侧重点完全不同。

防抖（Debounce） 的核心思想是“我等你停下来”。它只会在事件连续触发的间隔超过设定的时间后，才执行一次函数。想象一下你快速输入搜索框内容，防抖会等到你停止输入几百毫秒后，才去发送搜索请求。它关注的是“最终结果”。

节流（Throttle） 的核心思想是“我每隔一段时间就执行一次”。不管事件触发多频繁，它都会保证在设定的时间间隔内，函数最多只执行一次。比如你拖拽一个元素，节流会让你在拖拽过程中，每隔100毫秒更新一次元素位置，而不是每移动一个像素就更新一次。它关注的是“周期性执行”。

什么时候用节流，什么时候用防抖？

• 用防抖的场景：

  • 搜索框输入： 用户输入时频繁触发input事件，但我们只想在用户停止输入后才发送请求。
  • 窗口调整（resize）： 频繁调整窗口大小时，只在调整结束后才重新计算布局。
  • 表单验证： 用户输入时实时验证，但只在用户停止输入后才进行最终验证。
  • 在我看来，任何你只关心“最终状态”或者“事件流结束”的场景，防抖都是更好的选择。

• 用节流的场景：

  • 页面滚动（scroll）： 比如滚动加载更多内容，或者滚动时显示/隐藏顶部导航栏。你希望在滚动过程中有反馈，但又不想每次像素变化都触发。
  • 鼠标移动（mousemove）： 比如拖拽、绘制图形时，需要周期性获取鼠标位置。
  • 按钮点击： 防止用户短时间内重复点击按钮，导致多次提交表单。
  • 节流更适合那些需要“持续反馈”但又想控制频率的场景。它保证了事件在一定时间窗口内至少会触发一次（或在开始时触发一次，或在结束时触发一次）。

函数节流的常见应用场景有哪些？

函数节流在前端开发中简直是性能优化的“瑞士军刀”，用得好能解决很多性能瓶颈。

1. 滚动事件（scroll）处理： 这是最典型的场景。比如：

   • 懒加载图片： 当用户滚动到图片即将进入视口时才加载，而不是一进入页面就加载所有图片。
   • 滚动到底部加载更多： 当滚动条接近页面底部时，触发数据加载。
   • 固定导航栏/返回顶部按钮： 滚动时判断位置，控制这些元素的显示与隐藏。如果没有节流，每次滚动都会触发大量计算，导致页面卡顿。

2. 窗口调整事件（resize）处理：

   • 当浏览器窗口大小被调整时，页面布局可能需要重新计算。如果不节流，用户在拖拽窗口边缘时，页面会非常卡顿。节流可以确保在调整过程中，每隔一段时间才重新布局一次。

3. 鼠标移动事件（mousemove）处理：

   • 拖拽功能： 拖拽元素时，需要实时更新元素位置。
   • 游戏或交互式应用： 实时追踪鼠标位置来更新UI或游戏逻辑。
   • 绘图应用： 鼠标移动时绘制路径。
   • 这些场景下，mousemove事件触发频率极高，节流是必不可少的。

4. 按钮重复点击：

   • 用户可能会因为网络延迟或习惯性地快速点击一个提交按钮多次。通过节流，可以确保在点击一次后，即使在设定的时间内再次点击，也不会触发第二次提交，直到延迟时间过去。这能有效防止重复提交表单或重复发送请求。

5. 输入框实时搜索建议：

   • 虽然防抖更常用，但在某些需要“持续性”提示的场景，节流也有用武之地。比如，你可能希望用户每输入几个字符，就触发一次建议请求，而不是等到完全停止输入。

在我看来，掌握节流和防抖，是前端工程师优化用户体验和应用性能的基本功。很多时候，一个看似简单的交互卡顿，背后可能就是因为没有合理地使用这些技巧。

如何编写一个更健壮的函数节流实现？

上面给出的节流函数是一个基础版本，它只实现了“尾部执行”（trailing edge）。但在实际项目中，我们经常需要更灵活的控制，比如希望第一次事件触发时就立即执行（leading edge），或者在事件停止后仍然保证最后一次执行（trailing edge），甚至需要一个取消节流的方法。

一个更健壮的节流函数通常会包含leading（前沿执行）和trailing（后沿执行）选项，并能处理this上下文和参数的传递。

function throttle(func, wait, options = {}) {
  let timeoutId;
  let lastArgs;
  let lastThis;
  let lastResult; // 存储最后一次执行的结果
  let lastCallTime = 0; // 记录上次函数实际执行的时间戳

  // 默认开启前沿和后沿执行
  const leading = options.leading === undefined ? true : !!options.leading;
  const trailing = options.trailing === undefined ? true : !!options.trailing;

  // 内部执行函数，处理上下文和参数
  const invokeFunc = (time) => {
    lastResult = func.apply(lastThis, lastArgs);
    lastCallTime = time; // 更新上次执行时间
  };

  const throttled = function(...args) {
    const now = Date.now(); // 当前时间
    lastArgs = args;
    lastThis = this;

    // 如果是第一次调用，并且leading为false，则将lastCallTime设置为当前时间
    // 这样可以跳过第一次的立即执行
    if (!lastCallTime && !leading) {
      lastCallTime = now;
    }

    // 计算距离下次执行还需要等待的时间
    const remaining = wait - (now - lastCallTime);

    // 如果时间已到或者系统时间被修改（remaining可能为负数或超过wait）
    if (remaining <= 0 || remaining > wait) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      lastCallTime = now; // 更新执行时间
      invokeFunc(now); // 立即执行
    } else if (!timeoutId && trailing) { // 如果没有正在等待的定时器，并且开启了trailing
      // 设置一个定时器，在剩余时间后执行
      timeoutId = setTimeout(() => {
        lastCallTime = Date.now(); // 更新执行时间为定时器触发时的时间
        timeoutId = null;
        invokeFunc(lastCallTime);
      }, remaining);
    }
    return lastResult; // 返回最后一次执行的结果
  };

  // 添加一个取消节流的方法
  throttled.cancel = () => {
    clearTimeout(timeoutId);
    timeoutId = null;
    lastCallTime = 0;
  };

  return throttled;
}

// 示例用法：
// // 默认模式：第一次立即执行，之后每200ms最多执行一次，事件停止后若有待执行的也会执行最后一次
// const throttledScroll = throttle(() => console.log('Scroll!'), 200);
// window.addEventListener('scroll', throttledScroll);

// // 只在事件停止后执行（类似防抖，但仍然有节流的效果，即在wait时间内不会重复执行）
// const throttledResizeTrailing = throttle(() => console.log('Resize trailing!'), 300, { leading: false, trailing: true });
// window.addEventListener('resize', throttledResizeTrailing);

// // 第一次立即执行，之后每300ms最多执行一次，但事件停止后不再执行（如果最后一次触发在等待期内）
// const throttledClickLeading = throttle(() => console.log('Click!'), 300, { leading: true, trailing: false });
// document.getElementById('myButton').addEventListener('click', throttledClickLeading);

这个更复杂的实现，通过lastCallTime和remaining来精确控制执行时机。

• leading: true（默认）：第一次调用时会立即执行函数。
• trailing: true（默认）：在节流周期结束后，如果期间有新的调用，会再执行一次。
• cancel方法：可以手动取消任何待执行的节流调用，重置节流状态。

它考虑了更多实际应用中的需求，比如你希望用户第一次点击按钮就立即响应，但在冷却期内不再响应；或者在拖拽开始时立即更新位置，但拖拽停止后也要保证最终位置被更新。这种灵活的控制，让节流函数变得更加实用和强大。编写这种函数，真的需要对时间、闭包和函数上下文有比较深入的理解。

本篇关于《JS函数节流原理与实现方法解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！