前端性能优化篇之对节流与防抖的理解、如何实现节流函数和防抖函数

对节流与防抖的理解

防抖（Debouncing）： 防抖是为了避免函数被频繁调用。当一个事件触发后，会等待一段时间（比如 n 秒），如果在这段时间内事件再次被触发，就会重新计时。这种技术常用于按钮点击事件，防止用户多次点击导致多次请求发送到后端，或者在输入框中，等待用户输入完成后再执行操作。

节流（Throttling）： 节流是为了控制函数的执行频率。它规定在一个单位时间内只能触发一次回调函数，即使在这段时间内事件被触发多次，也只有一次生效。节流常用于监听滚动事件，以降低事件被频繁调用的频率，提高性能。

防抖函数的应用场景：

• 避免按钮多次提交，只执行最后一次提交。
• 表单验证需要与服务端配合，只执行一段连续输入事件的最后一次。
• 类似搜索联想词功能，在用户输入时使用 lodash.debounce。

节流函数的适用场景：

• 拖拽操作，固定时间内只执行一次，避免频繁触发位置变动。
• 监控浏览器窗口大小变化。
• 动画场景，避免短时间内多次触发动画引起性能问题。

通过合理使用节流和防抖技术，可以优化函数执行频率，提高性能，避免不必要的函数调用，以及更好地应对用户交互或事件触发的场景。

实现节流函数和防抖函数

节流函数的实现与应用

节流函数在前端开发中用于控制函数的执行频率，确保在一定时间间隔内最多执行一次特定操作，常用于处理频繁触发的事件，如滚动事件、按钮点击事件等。

• 节流（Throttling）： 节流是一种控制函数执行频率的技术，确保函数在一定时间间隔内只执行一次，避免过于频繁地执行。

在实际项目中，节流函数通常用于处理一些频繁触发的事件，例如滚动事件、拖拽事件等，以降低事件处理的频率，提高性能和用户体验。

假设在一个网页中，用户可以不断地滚动页面，但我们希望在用户滚动时只执行某个函数一次，而不是频繁执行，这时就可以使用节流函数来控制函数执行的频率。

// 时间戳版节流函数
function throttle(fn, delay) {
  var preTime = Date.now();

  return function() {
    var context = this,
      args = [...arguments],
      nowTime = Date.now();

    // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

// 定时器版节流函数
function throttle(fun, wait) {
  let timeout = null;
  
  return function() {
    let context = this,
      args = [...arguments];

    if (!timeout) {
      timeout = setTimeout(() => {
        fun.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

需要注意的：

• 确保传入的函数 fn 或 fun 能够正确执行，并且在适当的时机传入正确的参数。
• 根据实际需求调整节流函数的时间间隔，以达到最佳效果。
• 在使用节流函数时，要注意不要过度节流，影响到用户体验。

节流函数是前端开发中常用的技术，能够有效控制函数的执行频率，提高性能并改善用户体验。根据不同的需求和场景，可以选择合适的节流函数实现方式，并灵活应用于项目中，以达到更好的效果。

防抖函数的实现与应用

防抖函数在前端开发中用于确保在一段时间内只执行一次特定操作，常用于处理频繁触发的事件，如输入框输入、窗口大小变化等。

• 防抖（Debouncing）： 防抖是一种延迟执行函数的技术，确保函数在一段时间内不被频繁调用。

在实际项目中，防抖函数经常用于处理用户输入事件，确保在用户输入完成后再执行相应操作，以减少不必要的重复操作。

假设在一个搜索框中，用户输入搜索关键词时，我们希望等待用户停止输入一段时间后再执行搜索操作，而不是在每次输入时都触发搜索请求。

function debounce(fn, wait) {
  var timer = null;

  return function() {
    var context = this,
      args = [...arguments];

    // 如果此时存在定时器，则清除之前的定时器重新计时
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 设置定时器，在指定时间后执行传入的函数
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  };
}

// 示例用法
const searchInput = document.getElementById('search-input');

// 在搜索输入框中使用防抖函数处理输入事件
searchInput.addEventListener('input', debounce(function() {
  // 执行搜索操作，比如发送搜索请求
  console.log('Searching for: ' + searchInput.value);
}, 500));

需要注意的：

• 确保传入的函数 fn 能够正确执行，并且在适当的时机传入正确的参数。
• 根据实际需求调整防抖函数的等待时间，以适应不同的场景需求。
• 在使用防抖函数时，要注意设置合适的等待时间，以确保用户体验和功能的正常运行。

防抖函数是前端开发中常用的技术，能够有效控制函数的执行频率，特别适用于处理用户输入等频繁触发的事件。通过合理应用防抖函数，可以改善用户体验，减少不必要的重复操作，并提高页面性能。

持续学习总结记录中，回顾一下上面的内容：
节流和防抖是优化前端性能和提升用户体验的两种技术。节流控制函数在一定时间间隔内最多执行一次特定操作，常用于处理频繁触发的事件；而防抖延迟执行函数，在一段时间内只执行一次特定操作，常用于处理连续触发的事件。实现节流函数和防抖函数的核心思想是利用时间戳或定时器，通过延迟执行或限制执行频率来控制函数执行。