js中的防抖和节流

一、什么是防抖？

防抖是指在连续触发事件时，延迟一定时间后执行函数，如果在这段时间内又触发了事件，则重新计时。防抖主要用于防止短时间内大量触发同一事件，比如用户输入、窗口大小改变等。

下面是一个简单的防抖实现：

function debounce(func, delay) {
  let timeoutId;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timeoutId);

    timeoutId = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  };
}

// 使用防抖
const handleInput = debounce(function() {
  console.log('Input event debounced');
}, 300);

// 绑定事件
document.getElementById('inputField').addEventListener('input', handleInput);

在上述例子中，handleInput 函数在输入框发生输入时被防抖处理，只有在用户停止输入 300 毫秒后才会触发。

二、什么是节流？

节流是指在一定时间间隔内只执行一次函数。与防抖不同的是，即使在时间间隔内触发了多次事件，节流也只会执行一次。节流主要用于限制一些高频率的事件，比如滚动、鼠标移动等。

以下是一个简单的节流实现：

function throttle(func, delay) {
  let isThrottled = false;

  return function() {
    const context = this;
    const args = arguments;

    if (!isThrottled) {
      func.apply(context, args);
      isThrottled = true;

      setTimeout(function() {
        isThrottled = false;
      }, delay);
    }
  };
}

// 使用节流
const handleScroll = throttle(function() {
  console.log('Scroll event throttled');
}, 200);

// 绑定事件
window.addEventListener('scroll', handleScroll);

在这个例子中，handleScroll 函数在滚动事件发生时被节流处理，确保在 200 毫秒内只执行一次。

三、防抖和节流的应用场景

1.防抖的应用场景

• 输入框搜索：

当用户在搜索框中输入时，使用防抖可以减少搜索请求的发送次数，提高性能。

• 窗口大小调整：

在窗口大小调整的时候，使用防抖可以确保只有在用户停止调整窗口大小后才执行相应的逻辑。

2.节流的应用场景

• 滚动加载：

当用户滚动页面时，使用节流可以限制滚动事件的处理频率，避免过多的计算和渲染。

• 按钮点击：
  避免用户短时间内多次点击按钮触发重复的操作，可以使用节流来限制按钮点击的处理频率。