当前位置：首页 > JavaScript

节流js实现

2026-02-28 20:15:11JavaScript

节流（Throttle）的 JavaScript 实现

节流是一种限制函数执行频率的技术，确保函数在指定时间间隔内最多执行一次。适用于高频触发的事件（如滚动、鼠标移动等）。

基本实现原理

通过时间戳或定时器控制函数执行频率。以下是两种常见的实现方式：

时间戳版本

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

定时器版本

function throttle(func, delay) {
  let timeoutId = null;
  return function(...args) {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        timeoutId = null;
      }, delay);
    }
  };
}

优化版本（结合两者）

结合时间戳和定时器，确保最后一次触发能执行：

节流js实现

function throttle(func, delay) {
  let lastTime = 0;
  let timeoutId = null;
  return function(...args) {
    const now = Date.now();
    const remaining = delay - (now - lastTime);

    if (remaining <= 0 || remaining > delay) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      func.apply(this, args);
      lastTime = now;
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        timeoutId = null;
        lastTime = Date.now();
      }, remaining);
    }
  };
}

使用示例

const throttledScrollHandler = throttle(() => {
  console.log('Scroll event throttled');
}, 200);

window.addEventListener('scroll', throttledScrollHandler);