JavaScript函数防抖示例详解

前言

函数防抖(Debounce)是JavaScript中一种常用的性能优化技术，主要用于控制函数执行的频率。

什么是函数防抖？

函数防抖是指在一定时间间隔内，如果事件被连续触发，则只执行最后一次触发的事件处理函数。简单来说，就是让一个函数在一定时间内只执行一次。

实现原理

函数防抖的核心原理是使用定时器(setTimeout)来延迟函数的执行：

1. 当事件触发时，清除之前的定时器
2. 设置一个新的定时器
3. 如果在定时器到期前事件再次被触发，则重复上述过程
4. 只有当事件停止触发一段时间后，函数才会真正执行

应用场景

1. 搜索框输入联想(避免每次输入都发送请求)
2. 窗口大小调整事件
3. 滚动事件处理
4. 表单验证(在用户停止输入后进行验证)

基础实现

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

这是一个基本的防抖函数实现，接收要执行的函数和延迟时间作为参数。

进阶实现(立即执行版本)

 debounce(func, delay, immediate) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    
    if (timer) clearTimeout(timer);
    
    if (immediate) {
      const callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      if (callNow) func.apply(context, args);
    } else {
      timer = setTimeout(() => {
        func.apply(context, args);
      }, delay);
    }
  };
}

这个版本增加了立即执行选项，第一次触发会立即执行函数。

使用示例

// 搜索框输入防抖
const searchInput = document.getElementById('search');
const searchHandler = debounce(function() {
  console.log('搜索:', this.value);
  // 这里可以添加实际的搜索逻辑
}, 500);

searchInput.addEventListener('input', searchHandler);

// 窗口大小调整防抖
const resizeHandler = debounce(function() {
  console.log('窗口大小已调整');
}, 200);

window.addEventListener('resize', resizeHandler);

注意事项

1. 防抖时间间隔需要根据实际场景合理设置
2. 对于需要立即反馈的操作(如按钮点击)，不适合使用防抖
3. 防抖函数会延迟执行，可能导致用户体验上的延迟感

函数防抖是前端性能优化的重要手段，合理使用可以显著提升页面性能。

函数防抖和函数节流有什么区别？

函数防抖（Debounce）和函数节流（Throttle）是前端开发中两种常用的性能优化技术，用于控制高频触发事件的执行频率。虽然两者都旨在减少函数执行次数，但它们的实现逻辑和适用场景有显著区别。以下是两者的详细对比与分析：

‌一、核心区别对比‌

‌二、实现原理对比‌

‌1. 函数防抖的实现逻辑‌

• ‌关键点‌：通过 setTimeout 延迟执行，并在每次触发时清除之前的定时器。
• ‌示例代码‌：

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

• ‌类比‌：
  想象你正在等待电梯，如果有人按下按钮后，电梯到达前又有人按了按钮，电梯会取消之前的指令，重新开始倒计时。只有当电梯等待时间结束后，才会真正运行。

‌2. 函数节流的实现逻辑‌

• ‌关键点‌：通过时间戳或标志位记录上次执行时间，确保在固定间隔内最多执行一次。
• ‌示例代码（时间戳版）‌：

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

• ‌类比‌：
  想象你正在接水，水龙头每秒只能放一次水。无论你多么频繁地打开水龙头，水只会以固定的时间间隔流出。

‌三、适用场景对比‌

‌1. 函数防抖的适用场景‌

• ‌搜索框输入联想‌：
  用户输入时，等待用户停止输入后再发送请求（如等待 300ms 后搜索），避免每次输入都触发请求。
• ‌窗口调整结束‌：
  监听 resize 事件时，等待用户停止拖动窗口后再调整布局。
• ‌防重复提交‌：
  防止用户快速点击按钮多次提交表单。

‌2. 函数节流的适用场景‌

• ‌滚动事件处理‌：
  监听 scroll 事件时，无论用户滚动多快，每 200ms 最多执行一次滚动逻辑（如懒加载、返回顶部按钮显示）。
• ‌鼠标移动事件‌：
  游戏开发中，限制鼠标移动事件的触发频率，避免性能问题。
• ‌动画帧控制‌：
  通过 requestAnimationFrame 节流，确保动画帧率稳定。

‌四、实际案例对比‌

‌1. 搜索框输入‌

• ‌防抖‌：
  用户输入 "hello" 时，若每 100ms 输入一个字母，防抖会等待 300ms 后才发送 "hello" 的请求。
• ‌节流‌：
  用户输入 "hello" 时，若每 100ms 输入一个字母，节流可能只发送 "h"、"he"、"hel" 等部分请求（取决于间隔设置），导致搜索结果不准确。

‌2. 滚动加载‌

• ‌防抖‌：
  用户快速滚动页面时，防抖会等待滚动停止后才加载数据，导致用户看到空白区域。
• ‌节流‌：
  用户快速滚动页面时，节流会每隔固定时间加载一次数据，确保页面内容持续更新。

‌五、优缺点对比‌

‌六、如何选择？‌

1. ‌需要“等待稳定”的场景‌ → ‌防抖‌
   • 用户操作完成后才执行（如搜索框输入、窗口调整结束）。
2. ‌需要“持续响应”的场景‌ → ‌节流‌
   • 用户操作过程中需要持续反馈（如滚动加载、鼠标移动）。
3. ‌组合使用‌
   • 某些场景可能需要同时使用防抖和节流（如既要在滚动停止后加载数据，又要在滚动过程中限制频率）。

‌七、代码示例对比‌

‌1. 防抖示例：搜索框输入‌

const searchInput = document.getElementById('search');
const debouncedSearch = debounce(() => {
  console.log('执行搜索:', searchInput.value);
}, 300);

searchInput.addEventListener('input', debouncedSearch);

‌2. 节流示例：滚动加载‌

window.addEventListener('scroll', throttle(() => {
  console.log('检查滚动位置，加载数据');
  // 懒加载逻辑
}, 200));

‌总结‌

• ‌函数防抖‌：适合“等待用户操作完成”的场景，通过延迟执行减少不必要的计算。
• ‌函数节流‌：适合“需要持续响应”的场景，通过固定间隔执行确保流畅的用户体验。

根据实际需求选择合适的技术，可以显著提升页面性能和用户体验。

到此这篇关于JavaScript函数防抖的文章就介绍到这了,更多相关JS函数防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论