防抖和节流

---

防抖和节流是前端开发中常用的两种性能优化技术，它们都可以帮助我们避免过多的函数调用和网络请求，从而提高网站的性能和用户体验。

防抖(debounce)

防抖是指在短时间内连续触发同一事件时，只会执行一次函数。简单来说，就是延迟执行函数。在这个短时间内，如果又触发了该事件，则重新计算函数执行的时间。

以下是一个实现防抖的例子：

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

// 在输入框连续输入时，只有最后一次输入后才会触发函数。
const input = document.querySelector("input");
input.addEventListener(
  "input",
  debounce(function () {
    console.log("searching...");
  }, 500)
);

在上面的例子中，我们定义了一个 debounce()函数，它接受两个参数：要执行的函数和延迟时间。当事件被触发时，该函数会清除之前设置的定时器，并重新设置一个新的定时器。只有在短时间内没有再次触发该事件，定时器到期后才会执行回调函数。

节流(throttle)

节流是指在一段时间内只能触发一次函数。与防抖不同，它不会在最后一次触发事件后等待一段时间再执行函数，而是固定间隔执行函数。

以下是一个实现节流的例子：

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

// 滚动页面时每200ms执行一次函数。
window.addEventListener(
  "scroll",
  throttle(function () {
    console.log("scrolling...");
  }, 200)
);

在上面的例子中，我们定义了一个 throttle()函数，它接受两个参数：要执行的函数和时间间隔。当事件被触发时，该函数会检查当前时间是否距离上一次执行函数已经超过了指定的时间间隔。如果超过了时间间隔，则执行函数并更新上次执行函数的时间。

防抖和节流的区别

• 防抖是在短时间内连续触发同一事件时只会执行一次函数，节流是在一段时间内只能触发一次函数。
• 防抖延迟执行函数，节流固定时间间隔执行函数。
• 防抖适合处理频繁触发的事件，例如输入框搜索，防止向服务器发送多次请求；节流适合处理流式事件，如鼠标滚动，鼠标移动等，防止过多计算。