浅析防抖与节流，帮你轻松解决“抖动”和“洪流”难题

前端

2023-12-26 07:20:26

何为防抖与节流？

在前端开发中，经常会遇到一些需要频繁触发事件处理逻辑的场景，例如滚动事件、键盘输入、点击事件等。如果这些事件过于频繁地触发，很容易导致性能问题，甚至造成页面卡顿。防抖与节流就是为了解决这些问题而生的。

防抖（debounce） ：防抖是一种优化技术，用于限制函数在一定时间内只执行一次。当某个函数在短时间内被多次触发时，防抖可以确保该函数只执行一次，从而避免函数的重复执行。

节流（throttle） ：节流也是一种优化技术，但与防抖不同，节流不会完全阻止函数的执行，而是限制函数在一定时间内只执行一次。与防抖相比，节流允许函数在规定的时间间隔内多次执行，但会保证函数执行的频率不会超过规定的频率。

防抖与节流的区别

防抖与节流虽然都用于处理频繁触发的事件，但两者的实现方式和效果并不相同。

防抖只允许函数执行一次，而节流允许函数在规定时间内多次执行。
防抖的目的是避免函数的重复执行，而节流的目的是降低函数的执行频率。
防抖适用于处理需要在一段时间后才执行的事件，例如滚动事件、键盘输入等。而节流适用于处理需要在一定时间间隔内多次执行的事件，例如点击事件、resize事件等。

防抖与节流的实现

在JavaScript中，防抖与节流可以通过使用setTimeout()和clearTimeout()函数来实现。

防抖实现

// 防抖函数
function debounce(func, wait) {
  let timeoutId;
  return function () {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}

// 使用防抖函数处理滚动事件
window.addEventListener("scroll", debounce(() => {
  // 处理滚动事件的逻辑
}, 200));

节流实现

// 节流函数
function throttle(func, wait) {
  let lastCallTime = 0;
  return function () {
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      lastCallTime = now;
      func.apply(this, arguments);
    }
  };
}

// 使用节流函数处理点击事件
const button = document.getElementById("button");
button.addEventListener("click", throttle(() => {
  // 处理点击事件的逻辑
}, 1000));