深入剖析 JavaScript 防抖与节流：扼杀卡顿，焕发页面灵动

前端

2023-12-02 09:47:53

防抖与节流：相辅相成，各司其职

防抖与节流是 JavaScript 中的两位英雄，他们携手并进，共同维护着页面的流畅运行。

防抖（debounce）：

防抖就像一位沉稳老练的将军，他不会对每一件小事都做出反应，而是会等待一段时间，确保事情真的发生了才采取行动。在 JavaScript 中，防抖通常用于处理事件，比如滚动事件或输入事件。当事件触发时，防抖函数不会立即执行，而是等待一段时间，只有当事件在等待期间没有再次触发，函数才会执行。
节流（throttle）：

节流是一位勤奋敬业的园丁，他不会让杂草肆意生长，而是会定时除草，保持花园的整洁。在 JavaScript 中，节流通常用于处理连续触发的高频事件，比如鼠标移动事件或键盘输入事件。当事件触发时，节流函数不会立即执行，而是等待一段时间，只有当等待期间事件再次触发，函数才会执行。

何时使用防抖与节流

防抖与节流适用于不同的场景，以下是它们的典型用例：

防抖：
- 搜索框输入：当用户在搜索框中输入时，防抖函数可以防止每次按键都触发搜索，而是在用户停止输入一段时间后才执行搜索。
- 滚动事件处理：当用户滚动页面时，防抖函数可以防止每次滚动都触发事件处理程序，而是在用户停止滚动一段时间后才执行处理程序。
节流：
- 鼠标移动事件处理：当用户移动鼠标时，节流函数可以防止每次鼠标移动都触发事件处理程序，而是在鼠标移动一段时间后才执行处理程序。
- 键盘输入事件处理：当用户输入时，节流函数可以防止每次按键都触发事件处理程序，而是在用户停止输入一段时间后才执行处理程序。

实战案例：滚动回到顶部按钮

让我们通过一个实战案例来理解防抖与节流的应用。假设我们有一个带有滚动条的页面，页面底部有一个按钮，点击该按钮可以回到顶部。

// 获取回到顶部按钮
const backToTopButton = document.getElementById('back-to-top-button');

// 添加滚动事件监听器
window.addEventListener('scroll', () => {
  // 检查页面是否已滚动到一定高度
  if (window.scrollY > 100) {
    // 显示回到顶部按钮
    backToTopButton.classList.add('show');
  } else {
    // 隐藏回到顶部按钮
    backToTopButton.classList.remove('show');
  }
});

// 添加点击事件监听器
backToTopButton.addEventListener('click', () => {
  // 平滑滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});