js教程_javascript中什么是防抖和节流

防抖

防抖是一种常用的性能优化技术，它的原理是延迟执行，当事件触发后，在一定的时间间隔内，如果该事件持续触发，那么只会执行一次。防抖的作用是减少不必要的函数调用，避免频繁触发事件导致的性能问题。

防抖的应用场景很多，比如按钮点击事件、输入框输入事件以及滚动事件等。当用户连续点击一个按钮时，防抖可以确保只有最后一次点击时才会触发点击事件的处理函数。同样地，在处理输入框输入事件时，防抖可以确保只有用户输入停止一段时间后才会触发处理函数，从而避免不必要的API请求。

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

上述代码是一个通用的防抖函数实现。它接收两个参数，第一个参数是需要执行的函数，第二个参数是延迟时间。当使用该防抖函数包装一个事件处理函数后，事件处理函数在触发时会被推迟执行，直到用户停止触发事件一段时间后才真正执行。

节流

节流是另一种常用的性能优化技术，它的原理是限制函数的执行频率，确保一定时间内函数只会执行一次。与防抖不同的是，节流是定时执行，而不是延迟执行。

节流的应用场景也很广泛，比如页面滚动事件、窗口调整大小事件以及鼠标移动事件等。在处理滚动事件时，节流可以确保页面滚动时只会触发一次响应函数的执行，从而提高性能。同样地，当网页在响应窗口调整大小时，节流可以确保只有停止调整大小一段时间后才会触发处理函数，避免过多无效的响应。

function throttle(func, delay) {
  let timer;
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, arguments);
      lastTime = now;
    } else {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, arguments);
      }, delay);
    }
  };
}

上述代码是一个通用的节流函数实现。它接收两个参数，第一个参数是需要执行的函数，第二个参数是时间间隔。当使用该节流函数包装一个事件处理函数后，事件处理函数在触发时会根据时间间隔限制的规则来执行，确保一定时间内只会执行一次。

防抖和节流的比较

防抖和节流都是常用的性能优化技术，它们的目的都是减少函数的执行次数，提升页面的响应速度。然而，它们的使用场景有所差异，需要根据实际情况选择合适的技术。

防抖适合处理用户连续触发的事件，比如按钮点击和输入框输入等。当需要避免频繁触发事件导致性能问题时，防抖是一个较好的选择。节流适合处理高频率触发的事件，比如滚动和拖拽等。当需要限制函数的执行频率，确保一定时间内只会执行一次时，可以考虑使用节流。

综上所述，防抖和节流都是优化性能的常用工具，它们的核心思想是通过对函数执行的控制来减少不必要的计算和资源消耗。在实际开发中，根据业务场景和需求，合理运用防抖和节流可以提升用户体验，并优化页面的响应性能。