JS 手写节流 throttle 深入剖析

前端

2024-02-13 19:25:33

节流：优化函数调用的利器

在软件开发中，我们经常遇到这样的场景：某个函数需要频繁调用，但高频的调用可能会导致性能问题。节流技术应运而生，它可以限制函数在指定时间间隔内最多被调用一次，从而解决此类问题。

什么是节流？

节流是一种函数优化技术，它可以限制函数在一定时间间隔内最多被调用一次。当函数被触发时，节流函数会先检查自上次触发以来的时间差。如果时间差小于指定的间隔，则节流函数会忽略此次触发，不会执行函数；否则，节流函数会执行函数并更新上次触发的时间。

节流与防抖的区别

节流和防抖都是函数优化技术，但它们之间存在一些差异：

节流： 限制函数在指定时间间隔内最多被调用一次。如果在时间间隔内多次触发函数，只有第一次触发会执行，后续触发会被忽略。
防抖： 确保函数只在最后一次触发后的指定时间间隔内被调用一次。如果在时间间隔内多次触发函数，只有最后一次触发会执行，前面所有的触发都会被忽略。

实现节流函数

我们可以通过以下步骤实现一个节流函数：

定义一个私有变量 lastTime，用于存储上次触发函数的时间戳。
定义一个私有变量 timeoutId，用于存储定时器 ID。
在节流函数中，先获取当前时间戳，然后与 lastTime 比较。
如果当前时间戳与 lastTime 的差值小于指定的间隔，则直接返回，不执行函数。
否则，更新 lastTime 为当前时间戳，然后清除 timeoutId。
最后，使用 setTimeout() 函数设置一个定时器，并在指定的间隔后执行函数。

代码示例

以下是一个 JavaScript 的节流函数示例：

function throttle(func, wait) {
  let lastTime = 0;
  let timeoutId = null;

  return function (...args) {
    const now = Date.now();
    if (now - lastTime < wait) {
      return;
    }

    lastTime = now;
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(() => {
      func(...args);
      timeoutId = null;
    }, wait);
  };
}

使用节流函数

我们可以通过以下方式使用节流函数：

const button = document.getElementById('button');

const throttledClickHandler = throttle((event) => {
  // 这里执行按钮的点击事件处理程序
}, 1000);

button.addEventListener('click', throttledClickHandler);