函数防抖与节流：从原理到实践，全面掌握！函数防抖与节流：从原理到实践

前端

2023-12-21 23:05:08

SEO 关键词：

作为一名开发者，我们经常会遇到需要处理高频事件的情况，比如文本输入、滚动条滚动或鼠标移动。这些事件的触发频率非常高，如果我们对每个事件都进行处理，可能会导致性能问题。

为了解决这个问题，我们可以使用函数防抖和函数节流技术。这两种技术都可以通过减少事件处理的频率来提高性能。但是，它们的工作原理不同，适用于不同的场景。

函数防抖

函数防抖会在一段时间内只触发一次函数。即使在触发这段时间内有多个事件，函数也只会被调用一次。

举个例子，我们有一个文本输入框，需要在用户停止输入后进行搜索。如果我们在每个字符输入时都触发搜索函数，这可能会导致大量的请求，从而降低性能。

使用函数防抖，我们可以设置一个延迟，比如 500 毫秒。当用户输入时，函数防抖会启动一个计时器。如果在计时器结束之前有新的输入，则计时器会重新开始。只有当计时器结束时，函数才会被调用。

函数防抖的实现：

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

函数节流

函数节流会在一段时间内限制函数的调用频率。与函数防抖不同，即使在触发这段时间内有多个事件，函数也会被调用，但只会调用一次。

举个例子，我们有一个滚动条，需要在滚动时更新页面内容。如果我们对每个滚动事件都更新页面内容，这可能会导致页面卡顿。

使用函数节流，我们可以设置一个时间间隔，比如 100 毫秒。当滚动条滚动时，函数节流会启动一个计时器。如果在计时器结束之前有新的滚动事件，则计时器会忽略新的事件。只有当计时器结束时，函数才会被调用。

函数节流的实现：

function throttle(func, delay) {
  let canCall = true;
  return function () {
    if (!canCall) {
      return;
    }
    canCall = false;
    func.apply(this, arguments);
    setTimeout(() => {
      canCall = true;
    }, delay);
  };
}