防抖与节流：浅显易懂的小例子

防抖与节流：通俗易懂的小例子

防抖与节流是前端开发中两个常用的技术，理解它们至关重要。下面我们用两个小例子来深入浅出地学习一下这两个概念。

防抖

防抖的本质是，在事件触发后，不是立即执行，而是在一定时间内，如果该事件没有再次触发，才执行一次。

小例子：

function debounce(fn, wait) {
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

假设我们有一个输入框，需要在用户输入后延迟 500ms 才执行搜索。我们可以使用防抖函数来实现：

const searchInput = document.querySelector('input[type="text"]');

searchInput.addEventListener('input', debounce(() => {
  // 这里执行搜索操作
}, 500));

这样，当用户在输入框中输入时，只有在 500ms 内没有再次输入，才会触发搜索操作。

节流

节流与防抖类似，但它的重点是在指定时间间隔内，只允许执行一次事件。

小例子：

function throttle(fn, wait) {
  let lastTime = 0;
  return function () {
    const now = Date.now();
    if (now - lastTime >= wait) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

假设我们有一个按钮，需要在连续点击后，只在每隔 1s 才执行一次操作。我们可以使用节流函数来实现：

const button = document.querySelector('button');

button.addEventListener('click', throttle(() => {
  // 这里执行操作
}, 1000));

这样，当用户连续点击按钮时，每隔 1s 才执行一次操作。

总结

防抖和节流都是有用的技术，可以帮助我们在前端开发中处理事件触发。通过理解这两个概念，我们可以编写出更流畅、更响应的应用程序。