JS 节流函数|极客笔记

JS 节流函数

在前端开发中，经常会遇到需要限制函数触发频率的情况，特别是在处理用户输入时。节流函数就是一种能够控制函数调用频率的技术，它可以帮助我们避免函数被频繁触发，提高页面性能和用户体验。在本文中，我们将详细介绍节流函数的概念、原理和如何在 JavaScript 中实现。

什么是节流函数

节流函数是一种限制函数调用频率的技术。当一个事件被触发时，节流函数将会延迟执行该事件处理函数，确保在一段时间内只触发一次。这样可以有效减少函数的执行次数，提高页面性能，避免不必要的资源浪费。

节流函数适用于需要控制事件触发频率的场景，比如滚动事件、鼠标移动事件、输入框输入事件等。通过节流函数，我们可以确保在用户频繁操作时，只有一个事件被触发，避免页面出现卡顿或性能下降的情况。

节流函数的原理

节流函数的原理其实很简单：通过设置一个定时器，在事件触发后延迟一定时间再执行事件处理函数。如果在延迟时间内再次触发了事件，就会清除之前设置的定时器，重新设置一个新的定时器。这样就能确保在一段时间内只执行一次事件处理函数。

JavaScript 中的节流函数实现

在 JavaScript 中实现一个节流函数其实也很简单，我们可以通过闭包和定时器来实现。以下是一个简单的节流函数实现：

function throttle(func, wait) {
  let timeout;

  return function() {
    const context = this;
    const args = arguments;

    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

在上面的代码中，我们定义了一个 throttle 函数，它接受两个参数：func 是要节流的函数，wait 是延迟执行的时间间隔。在内部我们使用了闭包来保存定时器 timeout，然后返回一个新的函数。这个新函数会在被调用时检查是否有定时器在运行，如果没有则设置一个新定时器等待一段时间后执行函数。

使用节流函数

现在我们来看一个具体的示例，比如在处理滚动事件时使用节流函数：

// 创建一个节流函数
const throttleScroll = throttle(function() {
  console.log('滚动事件被触发！');
}, 200);

// 绑定滚动事件
window.addEventListener('scroll', throttleScroll);

在上面的示例中，我们创建了一个名为 throttleScroll 的节流函数，它会在滚动事件触发后延迟 200ms 才执行。然后我们将这个节流函数绑定到 scroll 事件上，确保在用户滚动页面时只会触发一次滚动事件处理函数。