【study】防抖和节流的区别

1. 防抖和节流是两种常用的优化技术，它们用于限制函数执行的频率，以提高性能和避免不必要的计算。理解并应用这两种技术可以显著提升 Web 应用的响应速度与用户体验。
2. 防抖

• 防抖：防抖的主要思想是使函数在特定时间内（例如 250 毫秒）不被再次调用。如果在这个时间窗口内再次触发函数调用，则重新计算时间窗口。
• 简单实现

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

• 应用场景

• 输入框实时搜索： 当用户在输入框中键入字符时，如果每次按键都会触发搜索请求，将会导致大量的网络请求。使用防抖可以确保只有用户停止输入一段时间之后才触发搜索请求，从而减少不必要的请求。

• 窗口调整事件： 在调整浏览器窗口大小时，resize 事件会频繁触发，从而导致大量的计算或渲染操作。防抖可以确保只有调整结束之后才执行相关操作。

3. 节流

• 节流：节流的主要思想是确保函数在规定时间内只执行一次。例如，在每个 100 毫秒内只允许函数执行一次，即使在此期间内函数被多次调用。
• 简单实现

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

• 应用场景

• 滚动事件： 由于滚动事件 scroll 会在滚动期间非常频繁地触发，使用节流可以避免滚动事件处理函数被频繁调用，从而提高性能。

• 按钮点击： 防止按钮被用户连续快速点击多次，从而导致多次提交，使用节流可以确保按钮的点击功能在规定时间内只能触发一次。