论javascript防抖与节流

防抖和节流函数都是用来优化 JavaScript 函数的执行频率的方法。它们在处理一些高频触发的事件或者函数调用时非常有用。

防抖函数的作用是，当一个事件多次触发时，只执行最后一次触发的事件。这意味着只有在最后一次触发后等待一段时间后，函数才会被执行。这对于一些需要等待用户停止操作后才执行的函数非常有用，比如实时搜索框。

下面是一个简单的防抖函数示例：

// 防抖函数
function debounce(func, delay) {
  let timer;

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

// 使用防抖函数
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', debounce(handleSearch, 500));

function handleSearch() {
  // 执行搜索逻辑
}

在上述示例中，防抖函数 `debounce` 接收一个函数 `func` 和一个延迟时间 `delay`。当事件被触发时，防抖函数会通过 `setTimeout` 设置一个定时器，在延迟时间后执行传入的函数 `func`。

**节流函数**的作用是，无论一个事件触发多少次，在规定的时间间隔内只执行一次事件。节流函数适用于一些需要在规定时间间隔内稀释事件执行的情况，比如鼠标移动事件。

以下是一个简单的节流函数示例：

// 节流函数
function throttle(func, limit) {
  let timer;
  let inThrottle = false;

  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      clearTimeout(timer);
      
      timer = setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// 使用节流函数
window.addEventListener('scroll', throttle(handleScroll, 1000));

function handleScroll() {
  // 执行滚动逻辑
}

在上面的示例中，节流函数 `throttle` 接收一个函数 `func` 和一个时间限制 `limit`。当事件被触发时，节流函数会检查是否在限定时间间隔内已经触发过一次事件，如果没有，则执行传入的函数 `func`，并设置一个定时器，定时器在限定时间后将 `inThrottle` 标记为 `false`，以便下次事件触发时再次执行函数。

总结一下，防抖函数适用于需要等待用户停止操作后才执行的场景，而节流函数适用于在一段时间内稀释事件执行的场景。使用防抖和节流函数能够有效地减少函数的执行次数，提高性能和响应速度。