【个人笔记】防抖和节流

        防抖（Debounce）和节流（Throttle）是前端开发中常用的两种优化函数调用频率的技术，主要用于减少不必要的函数执行，提高应用性能。

防抖（Debounce）

原理
        防抖的目的是在一系列连续触发的事件中，只执行最后一次事件的回调函数。具体来说，如果一个事件在规定的时间内连续触发，防抖函数会等待这个时间间隔结束，只有在这个时间间隔结束后，才执行一次回调。如果在这段时间内事件再次触发，则会重置计时器，再次等待这个时间间隔结束。

使用场景
        防抖常用于以下场景：
用户输入搜索框中的文本，每敲一个字符就发送请求查询数据。
窗口大小变化事件，频繁的窗口大小调整可能导致页面布局不断重新计算。
鼠标滚动事件，连续滚动时避免频繁执行计算密集型操作。

实现方式

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

 

 节流（Throttle）

原理
        与防抖不同，节流的目的是保证函数在一定时间内最多执行一次。无论事件触发多少次，函数在指定的时间间隔内只执行一次。一旦函数执行后，会进入冷却时间，在冷却时间内即使事件再次触发也不会执行函数。

 使用场景
节流适用于：
鼠标移动事件，避免频繁的位置计算和渲染。
页面滚动事件，防止在用户快速滚动时频繁更新UI。
高频的动画或定时器调用，如requestAnimationFrame。

实现方式

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

或者使用固定间隔的定时器：
 

let lastCall = 0;
const limit = 1000; // 1秒
function throttle(func) {
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

 防抖和节流的对比
- 确保在一段时间内只执行最后一次调用，适合那些只需要对最新的状态做出反应的场景。
- 确保函数在固定的时间间隔内只执行一次，适合需要定期执行某些操作的场景。

        通过合理运用防抖和节流，可以显著提升用户体验和应用性能，特别是在处理高频触发的事件时。