前端的防抖和节流

在前端开发中，防抖（debounce）和节流（throttle）是常用的优化技术，用于控制事件的触发频率，以提高性能和用户体验。它们的作用是限制函数的执行次数，特别是在处理频繁触发的事件（如窗口调整、滚动、输入等）时。

1. 防抖（Debounce）： 防抖是指在事件被触发后，等待一段时间后才执行相应的操作。如果在这段时间内事件再次被触发，那么计时将重新开始。简单来说，防抖会延迟执行函数，直到一定的时间间隔内没有再次触发该事件。

使用防抖的主要目的是避免频繁触发事件导致的性能问题。比如，当用户在输入框中输入内容时，我们希望等待用户停止输入一段时间后再执行搜索操作，而不是在每次输入时都立即执行搜索请求。

下面是一个防抖函数的示例代码：

function debounce(func, delay) {
  let timeoutId;
  
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

上述代码中的debounce函数接受一个函数参数func和延迟时间delay，并返回一个新的函数。该新函数利用setTimeout来延迟执行传入的func函数，如果在延迟期间再次调用了该函数，会清除之前的定时器并重新设置新的定时器。

1. 节流（Throttle）： 节流是指在一定的时间间隔内，只允许函数执行一次。与防抖不同，节流会按照固定的时间间隔执行函数，而不管事件触发的频率。

使用节流的主要目的是限制函数的执行频率，特别是当处理一些连续触发的事件时，如窗口滚动事件。

下面是一个节流函数的示例代码：

function throttle(func, delay) {
  let lastExecTime = 0;
  
  return function() {
    const now = Date.now();
    
    if (now - lastExecTime >= delay) {
      func();
      lastExecTime = now;
    }
  };
}

上述代码中的throttle函数接受一个函数参数func和时间间隔delay，并返回一个新的函数。该新函数会记录上次执行的时间lastExecTime，在当前时间与上次执行时间间隔超过delay时执行传入的func函数，并更新lastExecTime为当前时间。

需要注意的是，防抖和节流都是通过包装原始函数，返回一个新的函数来实现的。在实际应用中，可以根据具体需求选择使用防抖或节流来优化事件的处理。