不重样！带你花式掌握节流和防抖<##

2023-10-06 13:44:05

<#title>不重样！带你花式掌握节流和防抖<##/title>

1. 导语

最近在家办公有点闲，于是刷了一些前端面试题，研究一下函数节流和函数防抖。这两个函数在项目中经常使用，但我一直是直接从网上copy代码，没有深入研究过。最近就仔细看了一下，还是有点收获的。前端面试的时候，闭包的知识常被问到，而节流与防抖就是一个很经典的闭包的应用。

2. 日常开发中的节流和防抖

日常开发过程中，我们可能会遇到这样的情况：

输入框中输入的内容需要进行实时验证，但频繁的验证会降低性能，此时可以使用节流函数来限制验证的频率，避免不必要的开销。
滚动条滚动时需要对页面进行重新渲染，但频繁的重新渲染也会降低性能，此时可以使用防抖函数来控制重新渲染的时机，只在滚动条停止滚动后才进行重新渲染。

这仅仅是两个简单的例子，还有很多场景都可以使用节流和防抖函数来优化性能。

3. 节流和防抖的原理

3.1 节流

节流函数的原理是：在规定时间内，只允许执行一次函数。如果在规定时间内再次触发函数，则忽略这次触发。

举个例子，假设我们有一个函数throttle(fn, delay)，其中fn是要被节流的函数，delay是要控制的节流时间。那么，当我们调用throttle(fn, delay)后，如果在delay时间内再次调用fn，则这次调用将被忽略。

3.2 防抖

防抖函数的原理是：在规定时间内，如果函数被触发，则延迟执行该函数。如果在延迟执行期间再次触发函数，则取消之前的延迟执行，并重新延迟执行函数。

举个例子，假设我们有一个函数debounce(fn, delay)，其中fn是要被防抖的函数，delay是要控制的防抖时间。那么，当我们调用debounce(fn, delay)后，如果在delay时间内再次调用fn，则之前的延迟执行将被取消，并重新延迟执行fn。

4. 节流和防抖的区别

节流和防抖都是用来控制函数执行频率的函数，但它们的区别在于：

节流函数在规定时间内只允许执行一次函数，而防抖函数在规定时间内只允许执行一次函数。
节流函数在规定时间内多次触发函数，只会执行一次，而防抖函数在规定时间内多次触发函数，只会执行最后一次。

5. 节流和防抖的应用场景

节流和防抖的应用场景非常广泛，以下是一些常见的应用场景：

输入框中输入的内容需要进行实时验证。
滚动条滚动时需要对页面进行重新渲染。
按钮连续点击时需要防止多次提交。
鼠标移动时需要对元素进行拖动。
窗口大小改变时需要对页面进行重新布局。

6. 如何实现节流和防抖函数

节流和防抖函数的实现有很多种，这里只介绍一种比较简单的方法。

6.1 节流函数

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

6.2 防抖函数

function debounce(fn, delay) {
  let timer = null;
  return function() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}