前端概念 | 节流 (Throttle) - 从生活到技术，让您彻底了解节流的奥秘

2023-09-19 20:25:50

节流是什么？

节流在我们的生活中随处可见。例如，当我们在拧水龙头的时候，水龙头会以一定的频率出水，如果我们拧得过快，水龙头就会喷溅出水花。这是因为水龙头有一个节流装置，它可以控制出水量和出水速度，避免水花四溅。

在前端开发中，节流也是一种非常有用的技术。它可以帮助我们控制函数的执行频率，避免不必要的函数调用。例如，当我们滚动页面时，浏览器会不断触发滚动事件。如果我们对滚动事件进行节流处理，就可以只执行一次滚动事件处理函数，而不是每次滚动都执行一次。这样可以大大减少函数调用的次数，从而提高页面的性能。

节流的实现方法

节流的实现方法有很多，其中最简单的方法是使用定时器。我们可以在函数的开头设置一个定时器，如果在定时器到期之前再次调用该函数，就取消定时器并重新设置一个新的定时器。这样，该函数最多只能在一定的时间间隔内执行一次。

function throttle(func, wait) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

上面的代码定义了一个节流函数 throttle()。它接受两个参数：func是要节流的函数，wait是节流的等待时间。throttle() 函数返回一个新的函数，该函数在调用时会先检查是否有定时器存在。如果不存在，就创建一个新的定时器，并设置一个延迟时间。如果在延迟时间内再次调用该函数，就会取消之前的定时器并重新创建一个新的定时器。这样，该函数最多只能在一定的时间间隔内执行一次。

节流的应用场景

节流在前端开发中有很多应用场景。例如：

滚动事件处理：当滚动页面时，浏览器会不断触发滚动事件。我们可以对滚动事件进行节流处理，只执行一次滚动事件处理函数，而不是每次滚动都执行一次。这样可以大大减少函数调用的次数，从而提高页面的性能。
调整窗口大小时：当调整浏览器窗口大小时，浏览器会不断触发窗口大小改变事件。我们可以对窗口大小改变事件进行节流处理，只执行一次窗口大小改变事件处理函数，而不是每次调整窗口大小时都执行一次。这样可以大大减少函数调用的次数，从而提高页面的性能。
输入框输入内容时：当我们在输入框中输入内容时，浏览器会不断触发输入事件。我们可以对输入事件进行节流处理，只执行一次输入事件处理函数，而不是每次输入一个字符都执行一次。这样可以大大减少函数调用的次数，从而提高页面的性能。
鼠标移动事件处理：当我们在页面上移动鼠标时，浏览器会不断触发鼠标移动事件。我们可以对鼠标移动事件进行节流处理，只执行一次鼠标移动事件处理函数，而不是每次移动鼠标都执行一次。这样可以大大减少函数调用的次数，从而提高页面的性能。