【八股系列】防抖节流函数原理、区别以及应用?

🎉 博客主页：【剑九 六千里-CSDN博客】
🎨 上一篇文章：【vue-router的原理是什么?】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍

1. 防抖

1.1. 原理

防抖函数（Debounce）的原理是指在事件被触发后，在指定的时间段内没有再次被触发，才会执行回调函数。如果在指定的时间段内再次被触发，则重新开始计时。

1.2. 使用场景

防抖函数的应用场景包括：

• 输入框搜索：在用户输入时，防抖函数可以延迟执行搜索请求，直到用户停止输入一段时间后再执行搜索。
• 窗口大小调整：在窗口大小调整时，防抖函数可以延迟执行重新计算布局或渲染的操作，直到用户停止调整窗口大小一段时间后再执行。
• 按钮点击：在按钮点击时，防抖函数可以延迟执行点击事件的处理函数，直到用户停止点击一段时间后再执行。

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

2. 节流

2.1. 原理

节流函数（Throttle）的原理是指在事件被触发后，在指定的时间段内只执行一次回调函数。如果在指定的时间段内再次被触发，则忽略该次触发。

2.2. 使用场景

节流函数的应用场景包括：

• 滚动加载：在滚动页面时，节流函数可以延迟执行加载更多数据的操作，直到用户停止滚动一段时间后再执行。
• 鼠标移动：在鼠标移动时，节流函数可以延迟执行处理鼠标移动事件的操作，直到用户停止移动一段时间后再执行。
• 窗口大小调整：在窗口大小调整时，节流函数可以延迟执行重新计算布局或渲染的操作，直到用户停止调整窗口大小一段时间后再执行。

// Throttle function
function throttle(func, limit) {
  let inThrottle;
  return function () {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

3. 测试用例

// Example usage
const input = document.querySelector('input');
const div = document.querySelector('div');

// Debounce example
input.addEventListener('input', debounce(function () {
  console.log('Debounced input event');
}, 300));

// Throttle example
div.addEventListener('scroll', throttle(function () {
  console.log('Throttled scroll event');
}, 1000));