JS的节流、防抖

S的节流和防抖是常用的性能优化技术，用于限制函数的频繁执行，以减少浏览器的负荷和提高用户体验。下面我将分别介绍一下节流和防抖的概念和应用。

节流（Throttling） 是指在一定时间间隔内只执行一次函数。当事件频繁触发时，通过设定一个时间阈值，只有当距离上一次执行函数的时间超过这个阈值时，才会再次执行。这样可以有效地控制函数的执行频率，避免过多的计算或请求。在实际应用中，常见的场景包括页面滚动、窗口调整大小、鼠标移动等。

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

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

// 使用节流函数
const throttledFunc = throttle(function() {
  console.log('Throttled Function');
}, 1000);

window.addEventListener('scroll', throttledFunc);

上述代码中，throttle 函数接受一个原始函数 func 和一个延迟时间 delay，返回一个新的函数。每次触发事件时，该新函数会检查是否存在计时器 timer，如果不存在，则会设置一个延迟执行 func 的计时器。当计时器触发时，会清除计时器，并立即执行 func。这样就实现了节流的效果。

防抖（Debouncing） 是指在一连串连续触发事件后，只执行最后一次触发的函数。通常情况下，我们希望在连续触发某个事件后的最后一次触发时才执行相应的逻辑，这就可以使用防抖技术。

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

function debounce(func, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  }
}

// 使用防抖函数
const debouncedFunc = debounce(function() {
  console.log('Debounced Function');
}, 1000);

window.addEventListener('resize', debouncedFunc);

上述代码中，debounce 函数接受一个原始函数 func 和一个延迟时间 delay，返回一个新的函数。每次触发事件时，该新函数会清除前一个计时器并设置一个新的计时器，延迟执行 func。如果在延迟期间又触发了同样的事件，那么会重新计时，直到延迟时间内没有再次触发事件，才会执行 func。

通过使用节流和防抖技术，我们可以有效地控制函数的执行频率，避免不必要的计算或请求，提升页面性能和用户体验。在开发中，根据具体的需求选择适合的优化方式即可。希望以上介绍对您有所帮助！