javaScript防抖和节流是什么，有哪些应用场景

防抖和节流：提升前端性能的利器

在前端开发中，我们常常需要处理用户频繁触发的事件，如窗口调整、滚动和输入框输入等。这些事件如果不加以控制，会导致性能问题，影响用户体验。防抖（Debounce）和节流（Throttle）是两种常用的优化技术，帮助我们有效地处理这些高频事件。

防抖（Debounce）

防抖技术的核心思想是：无论事件触发多少次，只在最后一次触发后的延迟时间内执行一次操作。它适用于用户停止输入、窗口调整完成后再处理等场景。

实现原理

防抖通过设置一个计时器，当事件被触发时，重置这个计时器，确保某段时间（如 300 毫秒）内没有再次触发事件才执行目标函数。

代码实现

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

// 使用示例
window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 300));

节流（Throttle）

节流技术的核心思想是：在一定时间间隔内，只允许函数执行一次。它适用于限制事件触发频率的场景，如持续滚动页面、鼠标移动等。

实现原理

节流通过记录上次执行的时间或设置一个定时器，确保在指定时间间隔内只执行一次函数。

代码实现

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

// 使用示例
window.addEventListener('scroll', throttle(() => {
  console.log('Scrolled');
}, 200));

适用场景

1. 防抖：适用于希望在一系列事件结束后仅执行一次操作的场景。

   • 示例：搜索框输入、窗口调整。

2. 节流：适用于希望控制函数执行频率的场景。

   • 示例：滚动事件、鼠标移动。