当前位置：首页 > JavaScript

节流js实现

2026-01-15 13:51:43JavaScript

节流（Throttle）的实现原理

节流是一种限制函数执行频率的技术，确保函数在一定时间间隔内最多执行一次。适用于高频触发事件（如滚动、输入、窗口调整等）的场景。

基础实现方式

使用时间戳判断是否执行函数：

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 timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

综合优化版本

结合时间戳和定时器，既保证首次立即执行，又确保尾调用执行：

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

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

使用示例

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

window.addEventListener('scroll', handleScroll);

参数配置扩展

支持配置首次和末次是否执行：

节流js实现

function throttle(func, delay, options = {}) {
  let { leading = true, trailing = true } = options;
  let lastTime = 0;
  let timer = null;

  return function(...args) {
    const now = Date.now();
    if (!lastTime && !leading) lastTime = now;
    const remaining = delay - (now - lastTime);

    if (remaining <= 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      func.apply(this, args);
      lastTime = now;
    } else if (trailing && !timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
        lastTime = leading ? Date.now() : 0;
      }, remaining);
    }
  };
}