当理解节流防抖时，大家都在聊啥？

前端

2024-01-27 14:01:55

防抖与节流：前端优化中的“小伙伴”

在前端开发中，防抖和节流是两对经常被提及的“小伙伴”。它们通过不同的方式优化程序性能，深受开发者的喜爱。然而，这两个术语也经常被混淆不清。本文将深入探讨防抖和节流之间的区别，并分享一些实际应用场景，让你一目了然！

防抖与节流：大同小异，却有不同

防抖和节流同属于函数优化技巧，旨在减少函数调用次数，提升程序性能。然而，它们实现这一目标的方法却大有不同：

防抖：

仅执行最后一次函数调用，忽略之前的调用。
适用于需要在事件发生后一段时间后执行函数的场景，例如当用户停止输入时才执行搜索功能。

节流：

在规定的时间间隔内执行函数，即使在这个时间间隔内函数被多次调用。
适用于需要在事件发生时定期执行函数的场景，例如当用户滚动页面时，每隔一定时间更新页面内容。

各自的优缺点：有得必有失

了解了防抖和节流的区别后，我们再来看看它们的优缺点：

防抖：

优点：
- 减少不必要的函数调用，提升程序性能。
- 适用于需要在事件发生后一段时间后执行函数的场景。
缺点：
- 如果在规定的时间间隔内函数被多次调用，只有最后一次调用会被执行，前面的调用都会被忽略。

节流：

优点：
- 控制函数的执行频率，避免函数被频繁调用。
- 适用于需要在事件发生时定期执行函数的场景。
缺点：
- 如果函数在规定的时间间隔内被多次调用，它只会执行一次，而不会执行多次。

实际应用场景：让它们大显身手

防抖和节流在前端开发中有着广泛的应用场景，以下是一些典型案例：

防抖：

搜索建议： 当用户在输入框中输入内容时，防抖可以减少搜索建议的请求次数，从而提升搜索建议的性能。
表单验证： 当用户在表单中输入内容时，防抖可以减少表单验证的请求次数，从而提升表单验证的性能。

节流：

页面滚动： 当用户滚动页面时，节流可以控制页面内容更新的频率，从而避免页面内容频繁更新导致的性能问题。
视频播放： 当用户播放视频时，节流可以控制视频缓冲的频率，从而避免视频缓冲导致的卡顿问题。

防抖与节流：轻而易举，举手之劳

现在，让我们来看看如何使用 JavaScript 实现防抖和节流：

防抖：

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

节流：

function throttle(func, wait) {
  let lastTime = 0;
  return function () {
    const now = Date.now();
    if (now - lastTime > wait) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
}