函数防抖、节流：理解前端开发中常用防抖技巧

2023-10-10 18:38:51

函数防抖和函数节流都是JavaScript中用于处理事件的常用技术。它们都可以防止函数被过度调用，从而提高应用程序的性能。函数防抖适用于需要在一段时间内只执行一次的函数，而函数节流适用于需要在一段时间内只执行一定次数的函数。

函数防抖

函数防抖是指在一段时间内只执行函数的最后一次调用。如果在一段时间内多次调用函数，那么只有最后一次调用会被执行。函数防抖可以防止函数被过度调用，从而提高应用程序的性能。

函数防抖的实现方式有很多种。一种常用的方法是使用setTimeout()函数。setTimeout()函数可以延迟执行一段代码。我们可以使用setTimeout()函数来实现函数防抖。

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

这个函数接受两个参数：func和wait。func是要被防抖的函数，wait是要等待的时间。当函数被调用时，clearTimeout()函数会清除上一个setTimeout()函数的定时器。然后，setTimeout()函数会创建一个新的定时器，并在wait毫秒后执行func函数。

函数节流

函数节流是指在一段时间内只执行函数一定次数。如果在一段时间内多次调用函数，那么只有前几次调用会被执行。函数节流可以防止函数被过度调用，从而提高应用程序的性能。

函数节流的实现方式也有很多种。一种常用的方法是使用throttle()函数。throttle()函数可以限制函数在一段时间内只能执行一定次数。

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

这个函数接受两个参数：func和wait。func是要被节流的函数，wait是要等待的时间。当函数被调用时，会先检查距离上一次调用已经过去了多久。如果距离上一次调用已经过去了wait毫秒或以上，那么函数就会被执行。否则，函数就会被忽略。

函数防抖和函数节流的应用场景

函数防抖和函数节流都有广泛的应用场景。下面是一些常见的应用场景：

搜索框中的自动补全功能。当用户在搜索框中输入内容时，自动补全功能会根据用户输入的内容显示相关的搜索结果。如果用户在输入内容时频繁地触发自动补全功能，那么可能会导致性能问题。我们可以使用函数防抖来防止自动补全功能被过度调用。
无限滚动中的加载更多功能。当用户滚动页面到底部时，加载更多功能会自动加载更多内容。如果用户频繁地滚动页面，那么可能会导致性能问题。我们可以使用函数节流来防止加载更多功能被过度调用。
表单中的提交按钮。当用户点击提交按钮时，表单数据会被提交到服务器。如果用户频繁地点击提交按钮，那么可能会导致性能问题。我们可以使用函数防抖来防止提交按钮被过度调用。