截流函数-复习

截流函数（Throttle Function）

截流函数（Throttle Function）是另一种常用的性能优化技术，与防抖函数类似，但不同的是它确保在一定时间间隔内只执行一次操作，而不是将多个操作合并为一次执行。这在处理频繁触发的事件时尤其有用，如滚动事件、鼠标移动事件等。

实现原理

截流函数的核心思想是：

1. 固定执行频率：设定一个固定的时间间隔，在这个间隔内只允许执行一次操作。
2. 控制执行时机：如果在间隔内多次触发了事件，只有第一次触发会立即执行操作，之后的触发会被忽略，直到间隔时间过去，才会重新执行。

JavaScript 实现

下面是一个简单的 JavaScript 截流函数的实现：

  const throttle = (fu: Function, delay: any) => {
    let lastTime = 0
    return function (...args: any[]) {
      let nowTime = new Date().getTime()
      if (nowTime - lastTime > delay) {
        fu(...args)
        lastTime = nowTime
      }
    }
  }

使用方法

使用截流函数时，将需要进行截流的函数和时间间隔传递给 throttle 函数，它会返回一个新的函数。每次调用这个新函数时，它会检查当前时间与上次执行时间的间隔，只有当间隔超过设定的时间间隔 delay 时才执行传入的函数 fun。

示例

假设我们要处理一个滚动事件，在用户滚动时每隔 200ms 执行一次处理函数，可以这样使用截流函数：

function handleScroll() {
    console.log('Scrolling...');
    // 实际操作可能是更新 UI 或者发送请求等
}

const throttledScroll = throttle(handleScroll, 200);

window.addEventListener('scroll', throttledScroll);

在这个示例中，throttledScroll 函数被创建为一个每隔 200ms 执行一次 handleScroll 函数的版本。即使用户频繁滚动页面，操作也会被限制在每 200ms 执行一次，从而减少了不必要的操作次数，提升了性能和响应速度。

总结

截流函数与防抖函数一样，是优化 JavaScript 事件处理的重要工具之一。它通过控制操作的执行频率，有效地减少了事件触发过程中的计算和操作次数，提升了页面的响应速度和性能表现。