两分钟读懂防抖和节流函数

2024-02-04 04:35:51

防抖函数

防抖函数的目的是防止一个函数在短时间内被重复调用。这通常用于处理用户输入事件，例如键盘输入或鼠标移动。如果用户在短时间内连续触发同一个事件，防抖函数会延迟执行该函数，直到用户停止触发该事件一段时间后才执行。

防抖函数的实现原理很简单。它使用一个计时器来跟踪用户最后一次触发事件的时间。如果用户在计时器到期之前再次触发该事件，计时器会被重置。只有当计时器到期后，函数才会被执行。

在JavaScript中，我们可以使用以下代码来实现一个防抖函数：

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

节流函数

节流函数的目的是限制一个函数在一定时间内只能被调用一次。这通常用于处理频繁触发的事件，例如滚动事件或resize事件。如果用户在短时间内连续触发同一个事件，节流函数只会执行一次该函数，直到一定时间后才会再次执行。

节流函数的实现原理也比较简单。它使用一个计时器来跟踪函数最后一次被执行的时间。如果函数在计时器到期之前再次被调用，计时器会被重置。只有当计时器到期后，函数才会被执行。

在JavaScript中，我们可以使用以下代码来实现一个节流函数：

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