js防抖和节流代码实现

JavaScript中的防抖（Debounce）和节流（Throttle）是处理函数频繁触发导致性能问题的常见技巧，它们的区别在于：

- **防抖（Debounce）**：当一个事件连续触发多次时，只有在最后一次触发后的一段时间内如果没有再次触发，才会执行回调函数。这是为了防止短期内连续的操作堆积在一起，只执行一次。

- **节流（Throttle）**：无论事件触发多少次，都会保证在一定时间间隔内只执行一次回调。这有助于限制函数执行频率，比如滚动事件，确保不会因为快速滚动而过于频繁地执行处理滚动的函数。

以下是简单的防抖和节流实现：

// 防抖实现 (Debounce)
function debounce(func, delay) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(context, args), delay);
  };
}

// 节流实现 (Throttle)
function throttle(func, delay) {
  let lastExec = Date.now();
  return function() {
    const context = this;
    const args = arguments;
    if (Date.now() - lastExec >= delay) {
      func.apply(context, args);
      lastExec = Date.now();
    }
  };
}

你可以像这样使用它们：

const throttledFunction = throttle(function toBeLimited() {
  console.log('This function is throttled');
}, 500); // 每隔500毫秒执行一次

const debouncedFunction = debounce(function toBeDebounced() {
  console.log('This function is debounced');
}, 300); // 只在最后一次触发后300毫秒内执行