防抖和节流函数

防抖函数（Debouncing）和节流函数（Throttling）是在前端开发中常用的两种优化技术，用于限制事件处理的频率，提高性能和用户体验。尽管它们的目的相似，但它们解决的问题和实现方式有所不同。

防抖函数（Debouncing）

防抖函数用于限制事件的触发频率，确保在一定时间内只执行一次回调函数。当事件被触发时，防抖函数会设置一个定时器，在指定的时间间隔内没有再次触发事件时，才会执行回调函数。如果在等待时间内再次触发了事件，则会重新设置定时器，覆盖之前的定时器。

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

function debounce(func, delay) {
  let timerId;

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

function handleClick() {
  console.log('Button clicked!');
}

const debouncedClick = debounce(handleClick, 200); // 创建一个防抖函数

// 添加事件监听器
document.getElementById('myButton').addEventListener('click', debouncedClick);

在上述代码中，debounce函数接受两个参数：func是要执行的回调函数，delay是等待的时间间隔（以毫秒为单位）。它返回一个新的函数，每次调用该函数时，都会设置一个定时器，延迟执行回调函数。

节流函数（Throttling）:

节流函数用于限制事件的触发频率，确保在一定时间内只执行一次回调函数。与防抖函数不同的是，节流函数会在固定的时间间隔内执行回调函数，而不是在等待时间结束后立即执行。

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

function throttle(func, delay) {
  let timerId;
  let lastExecutedTime = 0;

  return function (...args) {
    const currentTime = Date.now();

    if (currentTime - lastExecutedTime >= delay) {
      func.apply(this, args);
      lastExecutedTime = currentTime;
    } else {
      clearTimeout(timerId);
      timerId = setTimeout(() => {
        func.apply(this, args);
        lastExecutedTime = Date.now();
      }, delay);
    }
  };
}
function handleScroll() {
  console.log('Scroll event triggered!');
}

const throttledScroll = throttle(handleScroll, 200); // 创建一个节流函数

// 添加事件监听器
window.addEventListener('scroll', throttledScroll);

在上述代码中，throttle函数接受两个参数：func是要执行的回调函数，delay是时间间隔（以毫秒为单位）。它返回一个新的函数，该函数会根据时间间隔判断是否执行回调函数。

总结：

• 防抖函数适用于限制事件的触发频率，并在等待时间结束后执行回调函数。
• 节流函数适用于限制事件的触发频率，并在固定的时间间隔内执行回调函数。

根据实际需求，可以选择使用防抖函数或节流函数来优化事件处理和提升用户体验。