防抖（debounce）和节流（throttle）的优化方法

防抖（debounce）和节流（throttle）的优化方法

引用

CSDN

1.

https://blog.csdn.net/qq_37268201/article/details/139456606

防抖（debounce）和节流（throttle）是两种常用的优化方法，用于减少高频事件（如滚动、输入、鼠标移动等）触发的函数执行次数，从而提高页面性能。

防抖（debounce）

防抖的原理是在一定时间内，无论触发多少次事件，都只执行一次目标函数。当事件停止触发后，等待一定时间后再执行目标函数。这种方式适用于输入内容验证、搜索等场景，可以有效避免因频繁触发而导致的性能问题。

特点：

• 减少了函数执行次数
• 延迟一定时间后执行
• 适用于输入内容验证、搜索等场景

代码实现：

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

// 使用示例
const inputChange = debounce(function() {
  console.log('input changed');
}, 300);

document.getElementById('input').addEventListener('input', inputChange);

节流（throttle）

节流的原理是在一定时间内，只允许目标函数执行一次。当事件触发时，如果距离上次执行的时间超过设定的阈值，则执行目标函数。这种方式适用于滚动、窗口大小改变等场景，可以有效降低函数执行频率，提高性能。

特点：

• 减少了函数执行次数
• 在规定时间内只执行一次
• 适用于滚动、窗口大小改变等场景

代码实现：

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

// 使用示例
const scrollHandler = throttle(function() {
  console.log('window scrolled');
}, 300);

window.addEventListener('scroll', scrollHandler);

总结

• 防抖适用于输入内容验证、搜索等场景，延迟一定时间后执行目标函数。
• 节流适用于滚动、窗口大小改变等场景，在规定时间内只执行一次目标函数。
• 它们的实现都是通过控制函数执行的时机来达到优化性能的目的。