说说防抖节流

前言

        当我们在网页开发中遇到一些频繁触发的事件，比如窗口滚动、输入框输入等，为了减少事件处理程序的执行次数，提高性能和用户体验，我们可以使用防抖和节流的技术。

防抖节流概念即应用场景

        防抖和节流都是通过控制事件处理程序的执行频率来达到优化的目的，但它们的实现方式和应用场景有所不同。

防抖概念：防抖（Debounce）的原理是在事件触发后，等待一段时间（比如200毫秒），如果在这段时间内没有再次触发事件，才执行事件处理程序。如果在等待时间内又触发了事件，则重新开始计时。这样可以避免事件处理程序被频繁执行，只在事件停止触发后执行一次。

举例代码说明

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

// 使用防抖技术处理窗口滚动事件
window.addEventListener('scroll', debounce(function() {
  console.log('窗口滚动事件被触发了');
}, 200));

在上述代码中，我们定义了一个debounce函数，它接受两个参数：func是要执行的事件处理程序，delay是等待的时间间隔。在debounce函数内部，我们使用了一个timer变量来保存定时器的引用。每次事件触发时，我们先清除之前的定时器，然后重新设置一个新的定时器，等待一段时间后执行事件处理程序。

场景：

        在使用防抖技术处理窗口滚动事件时，我们通过addEventListener方法将防抖函数作为事件处理程序传入。这样，当窗口滚动事件被触发时，防抖函数会延迟执行事件处理程序，只有在停止滚动后的200毫秒内没有再次触发事件，才会执行事件处理程序。

节流概念：

        节流（Throttle）的原理是在一定时间间隔内只执行一次事件处理程序。比如设置一个间隔时间为200毫秒，当事件触发后，立即执行事件处理程序，并在200毫秒内禁止再次触发事件。这样可以控制事件处理程序的执行频率，避免过于频繁的执行。

下面举例代码说明

        

function throttle(func, delay) {
  let timer;
  return function() {
    if (!timer) {
      func();
      timer = setTimeout(function() {
        timer = null;
      }, delay);
    }
  };
}

// 使用节流技术处理窗口滚动事件
window.addEventListener('scroll', throttle(function() {
  console.log('窗口滚动事件被触发了');
}, 200));

在上述代码中，我们定义了一个throttle函数，它接受两个参数：func是要执行的事件处理程序，delay是时间间隔。在throttle函数内部，我们使用了一个timer变量来保存定时器的引用。每次事件触发时，我们先判断是否存在定时器，如果不存在，则立即执行事件处理程序，并设置一个新的定时器，在指定的时间间隔后将定时器置为null。

应用场景：

        在上述代码中，我们定义了一个throttle函数，它接受两个参数：func是要执行的事件处理程序，delay是时间间隔。在throttle函数内部，我们使用了一个timer变量来保存定时器的引用。每次事件触发时，我们先判断是否存在定时器，如果不存在，则立即执行事件处理程序，并设置一个新的定时器，在指定的时间间隔后将定时器置为null。

结论：通过使用防抖和节流技术，我们可以有效地控制事件处理程序的执行频率，提高性能和用户体验。在实际开发中，我们可以根据具体的场景和需求选择合适的技术来优化事件处理。

希望这篇文章能帮助到大家