js防抖和节流

• 防抖（Debounce）：
  防抖的思想是，在指定的时间间隔内，只执行最后一次触发的函数调用。如果在这段时间间隔内又有触发事件发生，会重新开始计时。这样可以有效地降低函数的执行次数。

实现防抖的常见做法是通过设置一个定时器，在触发事件后，延迟一段时间后执行函数。如果在延迟时间内再次触发事件，就清除之前的定时器，并重新设置新的定时器。

下面是一个防抖的示例代码：

function debounce(func, delay) {
   
  let timer;

  return function(...args) {
   
    clearTimeout(timer);

    timer = setTimeout(() => {
   
      func.apply(this, args);
    }, delay);
  };
}

// 使用防抖函数
const debouncedFn = debounce(() => {
   
  // 执行的函数逻辑
}, 500);

// 在事件处理中应用防抖
element.addEventListener('input', debouncedFn);

• 节流（Throttle）：
  节流的思想是，在指定的时间间隔内，无论触发事件多少次，只执行一次函数调用。可以控制函数的执行频率。

实现节流的常见做法是通过设置一个定时器，在函数调用后的指定时间间隔内，禁止再次执行函数。

下面是一个节流的示例代码：

function throttle(func, delay) {
   
  let timer;
  let canRun = true;

  return function(...args) {
   
    if (!canRun) {
   
      return;
    }

    canRun = false;

    timer = setTimeout(() => {
   
      func.apply(this, args);
      canRun = true;
    }, delay);
  };
}

// 使用节流函数
const throttledFn = throttle(() => {
   
  // 执行的函数逻辑
}, 500);

// 在事件处理中应用节流
element.addEventListener('scroll', throttledFn);

需要注意的是，防抖和节流的使用场景不同。防抖适用于需要在事件停止触发后执行一次函数的场景，例如搜索输入框的输入事件，当用户停止输入一段时间后再进行搜索。节流适用于需要在一定时间间隔内执行函数的场景，例如页面滚动事件，限制事件的触发频率。根据具体的需求，选择合适的优化方式可以提升用户体验和性能。