JavaScript编写节流(throttle)和防抖(debounce)函数

节流

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

// 使用示例
function handleThrottledScroll() {
  console.log('Scroll event throttled');
}

const throttledScroll = throttle(handleThrottledScroll, 200);
window.addEventListener('scroll', throttledScroll);

在上述示例中，throttle函数的实现使用了闭包来保存一个定时器ID timerId。当事件触发时，throttle函数会检查定时器ID是否存在。若不存在，则设置一个新的定时器，并在延迟结束后调用传入的函数。这样，事件被触发时，只有在指定的延迟时间过去后，才会执行一次函数。

防抖

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

// 使用示例
function handleDebouncedInput() {
  console.log('Input debounced');
}

const debouncedInput = debounce(handleDebouncedInput, 300);
document.getElementById('myInput').addEventListener('input', debouncedInput);  

在上述示例中，debounce函数的实现也使用了闭包来保存一个定时器ID timerId。每次调用debounce返回的函数时，它会先清除之前设置的定时器，并重新设置一个新的定时器。只有在指定的延迟时间之后没有再次调用函数，才会执行一次函数。

请注意，以上示例只是简单的实现方式，实际应用中可能需要根据具体需求进行适当的修改。