拿捏好“节流”与“防抖”，让你的代码更加“佛系”

前端

2024-02-11 13:01:08

节流和防抖：提升代码性能的利器

简介

在Web开发中，我们经常需要处理用户输入，并在用户停止输入一段时间后触发特定功能。不加控制地处理这些输入可能会导致性能问题，甚至是不必要的计算。为了解决这个问题，我们可以使用节流和防抖技术。

节流

节流（throttle）是一种技术，它确保一个函数在一定时间内只触发一次。也就是说，如果在设定的时间间隔内触发了多次函数调用，只有第一次调用会被执行，而其余的会被忽略。

实现原理

节流的实现原理非常简单。它使用一个变量来记录函数上一次被调用的时间戳。当函数再次被触发时，它会检查当前时间戳和上次时间戳之间的间隔是否超过了预设的等待时间。如果是，则执行函数并更新上次时间戳；否则，忽略这次触发。

应用场景

节流非常适合那些需要在一定时间内只执行一次的函数，例如窗口大小调整事件或滚动事件。

防抖

防抖（debounce）也是一种控制函数触发频率的技术，但与节流不同，它允许在一定时间内触发多次函数调用，但只有最后一次调用会被执行。

实现原理

防抖的实现方式与节流类似，但它使用了定时器。当函数被触发时，它会检查当前时间戳和上次时间戳之间的间隔。如果是，则重置定时器，并在等待时间结束后执行函数。如果不是，则忽略这次触发。

应用场景

防抖适用于需要在一段时间后执行一次的函数，例如表单提交或搜索框输入。

区别

节流和防抖虽然都是控制函数触发频率的技术，但它们之间存在着一些关键的区别：

节流只允许函数在一定时间内触发一次，而防抖允许在一定时间内触发多次，但只有最后一次触发会被执行。
节流适合需要在一定时间内只执行一次的函数，而防抖适合需要在一段时间后执行一次的函数。

如何选择？

在实际开发中，我们可以根据不同的场景来选择使用节流还是防抖。以下是一些指导原则：

节流： 用于需要在一定时间内只执行一次的函数，例如窗口大小调整事件、滚动事件等。
防抖： 用于需要在一段时间后执行一次的函数，例如表单提交、搜索框输入等。

代码示例

以下是一些节流和防抖的代码示例：

节流

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

防抖

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

常见问题解答