防抖和节流：概念清晰，应用自如！

2023-10-22 19:23:48

大家好，今天我们来聊聊JavaScript中的防抖和节流。这两项技术都是用来控制函数调用的，它们可以帮助我们在特定场景下优化性能。

什么是防抖？

防抖会延迟函数的执行，直到函数的参数稳定下来才真正执行函数。这样做的目的是为了避免函数被多次调用，从而提高性能。

举个例子，我们在滚动页面时，经常会遇到这样的情况：页面刚开始滚动时，浏览器会触发很多滚动事件，如果我们在这个时候对每个滚动事件都执行一个函数，那么就会导致性能下降。为了解决这个问题，我们可以使用防抖来延迟函数的执行，直到页面滚动停止后才真正执行函数。

什么是节流？

节流会限制函数在指定时间间隔内最多执行一次。这样做的目的是为了防止函数被过度调用，从而提高性能。

举个例子，我们在拖动滚动条时，经常会遇到这样的情况：滚动条刚开始移动时，浏览器会触发很多滚动事件，如果我们在这个时候对每个滚动事件都执行一个函数，那么就会导致性能下降。为了解决这个问题，我们可以使用节流来限制函数在指定时间间隔内最多执行一次。

防抖和节流的区别

防抖和节流都是用来控制函数调用的技术，但它们之间还是有一些区别的。

防抖会延迟函数的执行，直到函数的参数稳定下来才真正执行函数。
节流会限制函数在指定时间间隔内最多执行一次。

防抖和节流的应用场景

防抖和节流都有各自的应用场景。

防抖适合用于以下场景：
- 页面滚动事件处理
- 鼠标移动事件处理
- 输入事件处理
- API调用
- 动画效果
节流适合用于以下场景：
- 滚动事件处理
- 鼠标移动事件处理
- 输入事件处理
- API调用
- 动画效果

如何实现防抖和节流

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

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

我们可以使用以下代码来实现节流：

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