函数防抖与函数节流的全面解析

前端

2023-11-20 10:19:14

函数防抖与函数节流：优化高频率 JS 代码执行的利器

当我们编写 JavaScript 代码时，高频率执行的代码往往会带来资源浪费和性能问题。为了解决这一挑战，出现了两种优化技术：函数防抖和函数节流。这两者都是延迟代码执行的技巧，但它们各自有不同的应用场景和实现方式。

函数防抖

什么是函数防抖？

函数防抖是一种技术，当一个函数被频繁触发时，它会阻止该函数在一段指定的时间内反复调用。只有当这段时间过去后，函数才会实际执行一次。

为什么使用函数防抖？

函数防抖特别适用于那些对事件做出响应的场景，但我们不希望该事件过于频繁地触发。例如：

在用户停止输入后执行搜索
在用户停止滚动后执行页面更新

如何实现函数防抖？

以下是使用 JavaScript 实现函数防抖的一个简单示例：

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

函数节流

什么是函数节流？

函数节流是一种技术，它保证一段代码在一定的时间间隔内只执行一次。无论代码被触发多少次，它只会按照规定的时间间隔执行。

为什么使用函数节流？

函数节流适用于以下场景：

在一段时间内只执行一次代码
在一段时间内只执行一定次数的代码

如何实现函数节流？

以下是使用 JavaScript 实现函数节流的一个简单示例：

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

函数防抖与函数节流的适用场景

为了帮助你更好地理解函数防抖和函数节流的适用场景，请参考以下表格：

场景	函数防抖	函数节流
对事件做出响应，但不想过于频繁地触发	是	否
延迟一段时间后再执行代码	是	否
在一段时间内只执行一次代码	否	是
在一段时间内只执行一定次数的代码	否	是

代码示例

现在，让我们看一个实际的代码示例，来说明如何使用函数防抖和函数节流来优化事件处理：

const input = document.querySelector('input');
const search = document.querySelector('#search');

input.addEventListener('input', debounce(() => {
  search.textContent = input.value;
}, 500));

window.addEventListener('scroll', throttle(() => {
  console.log('scrolling');
}, 1000));