JavaScript节流（Throttle）|极客笔记

JavaScript节流（Throttle）

在前端开发中，有一种常见的需求是控制某个函数在一段时间内只能执行一次，这种技术称为节流（Throttle）。节流不同于防抖（Debounce），防抖是在连续触发事件的情况下延迟执行函数，而节流是在连续触发事件时限制函数的执行频率，确保函数在一定时间段内只被执行一次。

节流的应用场景

节流的应用场景非常广泛，例如：

监听滚动事件时，频繁触发函数会造成性能问题，可以使用节流来限制函数的执行频率。
输入框输入时实时搜索，避免短时间内的频繁请求。
窗口大小改变的事件处理，比如resize事件。

实现节流的两种方式

使用定时器

function throttle(func, wait) {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, arguments);
        timeout = null;
      }, wait);
    }
  };
}

function handleScroll() {
  console.log("滚动事件被触发");
}

const throttledHandleScroll = throttle(handleScroll, 200);

window.addEventListener("scroll", throttledHandleScroll);

上面的代码中，throttle函数接受一个函数和一个等待时间作为参数，返回一个新的函数。在返回的函数中，利用了闭包保存了一个timeout变量，利用setTimeout来延迟执行实际的函数，并在执行完后重置timeout变量为null。

时间戳方式

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

function handleScroll() {
  console.log("滚动事件被触发");
}

const throttledHandleScroll = throttle(handleScroll, 200);

window.addEventListener("scroll", throttledHandleScroll);

上面的代码中，throttle函数通过比较当前时间和上一次执行时间的时间戳来计算是否超过了等待时间。