节流实现js

节流实现方法

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

定时器实现确保函数在延迟结束后执行，首次调用不会立即执行，但会确保最后一次调用被执行。

结合时间戳和定时器

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) {
      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);
    }
  };
}

这种实现结合了两种方法的优点，确保首次调用立即执行，最后一次调用也会被执行。

使用场景

节流适用于高频触发的事件，如：

• 滚动事件（scroll）
• 鼠标移动事件（mousemove）
• 窗口大小改变（resize）
• 键盘输入（keyup/keydown）

注意事项

• 节流时间间隔应根据实际需求调整，过短可能达不到效果，过长可能影响用户体验
• 确保清除定时器避免内存泄漏
• 在React等框架中使用时，注意绑定正确的this上下文

以上方法可以根据具体需求选择使用，结合时间戳和定时器的实现通常能提供最佳的用户体验。