大白话讲解防抖与节流——提升代码性能的减法艺术

2024-02-03 01:16:06

什么是防抖？

防抖（debounce）是一种函数优化技术，它可以防止函数在指定时间间隔内被重复调用。例如，当我们在文本输入框中输入内容时，如果每次输入都会触发一次搜索请求，这可能会导致服务器压力过大，影响用户体验。为了解决这个问题，我们可以使用防抖技术，在用户停止输入一段时间后才触发搜索请求。

什么是节流？

节流（throttle）也是一种函数优化技术，它可以限制函数在指定时间间隔内最多被调用一次。例如，当我们在滚动网页时，如果每次滚动都会触发一次窗口大小变化事件，这可能会导致浏览器性能下降。为了解决这个问题，我们可以使用节流技术，在窗口大小变化达到一定幅度后才触发窗口大小变化事件。

防抖与节流的区别

防抖和节流都是函数优化技术，但它们的区别在于：

防抖会在指定时间间隔内防止函数被重复调用，而节流会在指定时间间隔内限制函数最多被调用一次。
防抖一般用于处理用户输入事件，而节流一般用于处理滚动、窗口大小变化等事件。

如何实现防抖？

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

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

这个函数接收两个参数：func是要防抖的函数，wait是防抖的等待时间。当func被调用时，它会先清除之前的timeout，然后设置一个新的timeout。如果在wait时间内func再次被调用，之前的timeout会被清除，新的timeout会被设置。只有当wait时间到了之后，func才会被调用。

如何实现节流？

在JavaScript中，我们可以使用以下代码实现节流：

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

这个函数接收两个参数：func是要节流的函数，wait是节流的等待时间。当func被调用时，它会先检查上次调用func的时间是否超过了wait时间。如果超过了，它就会调用func。如果没有超过，它就会忽略这次调用。