【JavaScript】节流（Throttle）及其底层实现详解

Peter-Lu

于 2024-09-16 12:10:47 发布

阅读量466

点赞数 7

分类专栏： # JavaScript 文章标签： javascript 开发语言 ecmascript 前端

本文链接：https://blog.csdn.net/lph159/article/details/142301150

版权

JavaScript 专栏收录该内容

88 篇文章 0 订阅

订阅专栏

JavaScript 中的性能优化技术中，**节流（Throttle）**是非常常用的一种方法，主要用于控制高频率触发的事件，从而提升应用的性能。节流的原理是在一段时间内只允许执行一次函数调用，避免频繁触发操作对性能的影响。本文将详细介绍 JavaScript 中的节流及其底层实现，帮助开发者在实际项目中更好地运用这一技术。

一、什么是节流

1. 概念介绍

节流是一种用于控制函数执行频率的技术。它通过限制函数的执行次数，确保在指定的时间间隔内，目标函数只会执行一次。相比于防抖（Debounce），节流关注的是每隔一段时间执行一次，而防抖关注的是事件触发结束后执行一次。

2. 场景应用

在实际项目中，节流通常应用于高频率触发的事件，例如：

窗口滚动事件（scroll）：滚动事件会随着用户的滚动频率而触发多次，通过节流技术，可以减少事件的触发频率，避免大量无效的函数调用。
窗口调整大小事件（resize）：在调整窗口大小时，resize 事件会频繁触发，而实际只需要在一段时间后更新布局即可。
表单提交：当用户快速点击表单的提交按钮时，节流可以防止多次触发表单提交。

二、节流的基本实现

1. 简单版节流函数

下面我们来看一个简单的节流函数实现：

function throttle(func, wait) {
  let lastTime = 0;
  
  return function(...args) {
    const now = Date.now();
    
    if (now - lastTime >= wait) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

代码解读：

lastTime：用来记录上一次函数执行的时间。
now：当前时间戳。
if (now - lastTime >= wait)：如果当前时间距离上一次执行时间超过设定的等待时间 wait，则执行函数。
func.apply(this, args)：执行传入的函数，确保上下文 this 和参数 args 能正确传递。

2. 使用示例

假设我们需要为窗口的滚动事件绑定节流函数，以每隔 200 毫秒执行一次函数：

window.addEventListener('scroll', throttle(function() {
  console.log('Scroll event triggered');
}, 200));

通过这种方式，我们可以减少滚动事件的触发频率，从而提升页面性能。

三、节流的高级实现

1. 带有定时器的节流

除了上面的简单实现，我们还可以通过引入定时器来实现更加复杂的节流逻辑。这样做可以避免最后一次触发事件时没有执行的情况。

function throttle(func, wait) {
  let timeout = null;
  let previous = 0;
  
  return function(...args) {
    const now = Date.now();
    const remaining = wait - (now - previous);
    
    clearTimeout(timeout);
    
    if (remaining <= 0) {
      previous = now;
      func.apply(this, args);
    } else {
      timeout = setTimeout(() => {
        previous = Date.now();
        func.apply(this, args);
      }, remaining);
    }
  };
}

代码解读：

timeout：用于存储定时器。
previous：记录上一次执行的时间戳。
remaining：计算距离下一次可以执行的时间。
定时器机制：如果剩余时间 remaining 还未到，设置一个定时器在剩余时间结束后执行函数，保证最后一次事件也能触发。

2. 使用示例

对于用户快速点击按钮的场景，可以使用带定时器的节流来防止频繁的触发：

const button = document.getElementById('submitButton');
button.addEventListener('click', throttle(function() {
  console.log('Button clicked');
}, 1000));

此时，每隔 1 秒钟用户的点击事件才会被触发一次，无论用户点击多么频繁。

四、节流和防抖的区别

节流和防抖经常一起讨论，因为它们都是控制函数执行频率的技术，但它们的使用场景和工作原理有所不同。

1. 防抖（Debounce）

防抖的原理是在高频率触发的事件中，只在事件停止后的一段时间内执行一次函数。如果事件在等待时间内再次触发，计时器会被重置。例如，搜索框的输入提示功能通常使用防抖技术。

function debounce(func, wait) {
  let timeout;
  
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

2. 区别

技术	执行时机	应用场景
节流	每隔一段时间执行一次	滚动、按钮点击、窗口调整大小等
防抖	事件停止后执行一次	搜索框输入、表单验证等

五、节流的实际应用场景详解

1. 滚动事件中的节流

在实现页面滚动加载时，滚动事件是高频触发的场景。如果每次滚动都会请求新的数据，可能导致性能问题。通过节流函数，限制滚动时的请求频率。

window.addEventListener('scroll', throttle(function() {
  // 模拟加载更多内容
  console.log('加载更多内容');
}, 300));

2. 按钮点击中的节流

对于某些高频率的按钮点击操作（如表单提交），使用节流可以防止用户在短时间内多次提交数据。

document.getElementById('submit').addEventListener('click', throttle(function() {
  console.log('表单已提交');
}, 1000));

通过节流，每次点击按钮都需要等待 1 秒的冷却时间，防止重复提交。

六、实现节流时的注意事项

1. 选择合适的时间间隔

时间间隔 wait 的选择非常关键，过短的间隔可能没有明显的节流效果，过长的间隔则可能导致用户体验下降。应根据具体的场景和需求，合理设置 wait 值。

2. 保持上下文和参数传递

在实现节流时，需要确保函数的上下文 this 以及传递的参数能够正确处理，因此建议使用 apply 或 call 来执行目标函数。

3. 可取消的节流

在某些场景下，你可能需要手动取消节流操作。例如，在组件卸载时，确保未完成的节流函数不会继续执行。这时可以通过暴露一个取消机制来实现。

function throttle(func, wait) {
  let timeout = null;
  
  const throttled = function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      }, wait);
    }
  };
  
  throttled.cancel = function() {
    clearTimeout(timeout);
    timeout = null;
  };
  
  return throttled;
}