JavaScript如何实现函数节流

# JavaScript如何实现函数节流

## 什么是函数节流

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

## 实现原理

通过时间戳或定时器控制函数执行：
1. **时间戳版**：记录上次执行时间，当前时间超过间隔才执行
2. **定时器版**：设置定时器，执行后清除，确保间隔期内只存在一个定时器

## 代码实现

```javascript
// 时间戳实现
function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

// 定时器实现
function throttle(fn, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

应用场景

• 窗口resize事件
• 页面滚动事件
• 按钮频繁点击
• 鼠标移动事件

通过节流可以有效减少不必要的计算和DOM操作，提升页面性能。 “`