【如何实现 JavaScript 的防抖和节流？】

如何实现 JavaScript 的防抖和节流？

前言

防抖（Debounce）和节流（Throttle）是 JavaScript 中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数，提升性能并改善用户体验。本文将详细介绍防抖和节流的实现原理及其应用场景。

---

关键词

JavaScript、防抖、节流、高频事件、性能优化、事件处理、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实践

---

一、防抖（Debounce）

1.1 防抖的定义

防抖是指在事件被触发后，等待一定时间（如 300ms）再执行事件处理函数。如果在等待时间内事件再次被触发，则重新计时。

1.2 防抖的实现

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

1.3 防抖的应用场景
搜索框输入：在用户停止输入后再发起搜索请求。

窗口调整大小：在用户停止调整窗口大小后再重新计算布局。

二、节流（Throttle）

2.1 节流的定义
节流是指在一定时间间隔内（如 300ms），事件处理函数最多执行一次。无论事件触发频率多高，都会按照固定的时间间隔执行。

2.2 节流的实现

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

2.3 节流的应用场景
滚动事件：在页面滚动时，每隔一定时间执行一次事件处理函数。

鼠标移动：在鼠标移动时，每隔一定时间执行一次事件处理函数。

三、防抖和节流的区别

3.1 执行时机
防抖：在事件停止触发后执行。

节流：在事件触发过程中按照固定时间间隔执行。

3.2 适用场景
防抖：适用于事件触发频率高但只需在事件停止后执行一次的场景。

节流：适用于事件触发频率高但需要按照固定频率执行的场景。

结语

防抖和节流是 JavaScript 中优化高频事件处理的两种重要技术。理解它们的实现原理和适用场景，可以帮助开发者编写出更加高效和用户友好的代码。通过合理使用防抖和节流，可以显著提升应用的性能和用户体验。