js防抖节流的实现

在 JavaScript 中，防抖（debounce）和节流（throttle）是常用的优化技术，用于控制事件触发的频率。下面是它们的实现示例：

防抖（Debounce）： 防抖的目的是限制事件的触发频率，当事件触发后，只有在一定的延迟时间内没有再次触发事件时，才执行相应的操作。

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

// 使用例子
const debouncedFunc = debounce(() => {
  console.log('Debounced function is executed');
}, 200);

// 假设连续触发事件
debouncedFunc(); // 不会执行
debouncedFunc(); // 不会执行
debouncedFunc(); // 不会执行

// 在 200ms 后，只执行一次
在上面的示例中，debounce 函数接受一个函数 func 和一个延迟时间 delay，并返回一个新的函数。当返回的函数被连续触发时，会清除之前的延迟定时器，并创建一个新的延迟定时器。只有当一定的时间内没有再次触发事件时，才会执行 func。

节流（Throttle）： 节流的目的是限制事件的触发频率，当事件触发后，在一定的时间间隔内只执行一次相应的操作。

function throttle(func, delay) {
  let isThrottled = false;
  
  return function(...args) {
    if (isThrottled) {
      return;
    }
    
    isThrottled = true;
    
    func.apply(this, args);
    
    setTimeout(() => {
      isThrottled = false;
    }, delay);
  };
}

// 使用例子
const throttledFunc = throttle(() => {
  console.log('Throttled function is executed');
}, 200);

// 假设连续触发事件
throttledFunc(); // 执行
throttledFunc(); // 不会执行
throttledFunc(); // 不会执行

// 在 200ms 后，可以再次执行
在上面的示例中，throttle 函数接受一个函数 func 和一个时间间隔 delay，并返回一个新的函数。当返回的函数被触发时，如果已经处于节流状态，则直接返回，否则执行 func，并设置一个定时器，在一定的时间间隔后将节流状态重置为 false。