函数节流的核心是限制函数在单位时间内只能执行一次，常用于优化高频事件的性能。与防抖不同，节流采用“定时定量”执行策略，无论事件触发多频繁，每隔一段时间必定执行一次，适用于需要周期性响应的场景。防抖则等待事件流停止后才执行，适合只关注最终状态的操作。节流典型应用场景包括滚动事件（如懒加载、滚动加载）、窗口缩放、鼠标移动（如拖拽、绘图）和按钮防重复点击等。一个基础节流实现使用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）： 比如拖拽、绘制图形时，需要周期性获取鼠标位置。
- 按钮点击： 防止用户短时间内重复点击按钮，导致多次提交表单。
- 节流更适合那些需要“持续反馈”但又想控制频率的场景。它保证了事件在一定时间窗口内至少会触发一次（或在开始时触发一次，或在结束时触发一次）。
函数节流的常见应用场景有哪些？
函数节流在前端开发中简直是性能优化的“瑞士军刀”，用得好能解决很多性能瓶颈。
-
滚动事件（
scroll
）处理： 这是最典型的场景。比如：
- 懒加载图片： 当用户滚动到图片即将进入视口时才加载，而不是一进入页面就加载所有图片。
- 滚动到底部加载更多： 当滚动条接近页面底部时，触发数据加载。
- 固定导航栏/返回顶部按钮： 滚动时判断位置，控制这些元素的显示与隐藏。如果没有节流，每次滚动都会触发大量计算，导致页面卡顿。
-
窗口调整事件（
resize
）处理：
- 当浏览器窗口大小被调整时，页面布局可能需要重新计算。如果不节流，用户在拖拽窗口边缘时，页面会非常卡顿。节流可以确保在调整过程中，每隔一段时间才重新布局一次。
-
鼠标移动事件（
mousemove
）处理：
- 拖拽功能： 拖拽元素时，需要实时更新元素位置。
- 游戏或交互式应用： 实时追踪鼠标位置来更新UI或游戏逻辑。
- 绘图应用： 鼠标移动时绘制路径。
- 这些场景下，
mousemove
事件触发频率极高，节流是必不可少的。
-
按钮重复点击：
- 用户可能会因为网络延迟或习惯性地快速点击一个提交按钮多次。通过节流，可以确保在点击一次后，即使在设定的时间内再次点击，也不会触发第二次提交，直到延迟时间过去。这能有效防止重复提交表单或重复发送请求。
-
输入框实时搜索建议：
- 虽然防抖更常用，但在某些需要“持续性”提示的场景，节流也有用武之地。比如，你可能希望用户每输入几个字符，就触发一次建议请求，而不是等到完全停止输入。
在我看来，掌握节流和防抖，是前端工程师优化用户体验和应用性能的基本功。很多时候，一个看似简单的交互卡顿，背后可能就是因为没有合理地使用这些技巧。
如何编写一个更健壮的函数节流实现？
上面给出的节流函数是一个基础版本，它只实现了“尾部执行”（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
方法：可以手动取消任何待执行的节流调用，重置节流状态。
它考虑了更多实际应用中的需求，比如你希望用户第一次点击按钮就立即响应，但在冷却期内不再响应；或者在拖拽开始时立即更新位置，但拖拽停止后也要保证最终位置被更新。这种灵活的控制，让节流函数变得更加实用和强大。编写这种函数，真的需要对时间、闭包和函数上下文有比较深入的理解。
评论（已关闭）
评论已关闭