节流和防抖：揭开前端开发中巧妙的函数用法

前端

2024-01-29 04:40:08

在前端开发中，我们经常会遇到这样的场景：当用户在输入框中输入内容时，我们需要实时更新显示结果，或者在用户滚动页面时，我们需要加载更多数据。这时，如果我们不采取任何措施，就会导致页面加载缓慢、用户体验不佳。

节流和防抖就是两种可以帮助我们优化页面性能、提高用户体验的函数。节流可以限制函数在一定时间内只能执行一次，而防抖可以确保函数只在事件停止触发后才执行一次。

节流

节流函数可以限制函数在一定时间内只能执行一次。当函数被触发时，它会检查上次执行的时间，如果距离上次执行的时间小于设定的时间间隔，函数就不会执行。否则，函数将执行。

节流函数的典型应用场景包括：

输入框中的内容更新：当用户在输入框中输入内容时，我们可以使用节流函数来限制更新显示结果的频率。这样可以防止页面因频繁更新而变得卡顿。
页面滚动时的加载更多数据：当用户滚动页面时，我们可以使用节流函数来限制加载更多数据的频率。这样可以防止页面因频繁加载数据而变得卡顿。
按钮点击事件：当用户点击按钮时，我们可以使用节流函数来限制按钮的点击频率。这样可以防止用户因误操作而多次提交表单或执行其他操作。

防抖

防抖函数可以确保函数只在事件停止触发后才执行一次。当函数被触发时，它会设置一个计时器。如果在计时器到期之前函数再次被触发，计时器将被重置。只有当计时器到期后函数才执行。

防抖函数的典型应用场景包括：

输入框中的内容验证：当用户在输入框中输入内容时，我们可以使用防抖函数来限制内容验证的频率。这样可以防止页面因频繁验证而变得卡顿。
表单提交：当用户提交表单时，我们可以使用防抖函数来限制表单提交的频率。这样可以防止用户因误操作而多次提交表单。
滚动条事件：当用户滚动滚动条时，我们可以使用防抖函数来限制滚动条事件的触发频率。这样可以防止页面因频繁触发滚动条事件而变得卡顿。

节流和防抖的区别

节流和防抖都是用来控制函数执行频率的函数，但它们的工作方式不同。节流函数限制函数在一定时间内只能执行一次，而防抖函数确保函数只在事件停止触发后才执行一次。

在实际应用中，我们可以根据不同的场景选择使用节流函数或防抖函数。例如，在输入框中的内容更新场景中，我们可以使用节流函数来限制更新显示结果的频率，而在表单提交场景中，我们可以使用防抖函数来限制表单提交的频率。

代码示例

以下是一个使用节流函数的代码示例：

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

const input = document.getElementById('input');
input.addEventListener('input', throttle(function () {
  // 更新显示结果
}, 500));

以下是一个使用防抖函数的代码示例：

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

const button = document.getElementById('button');
button.addEventListener('click', debounce(function () {
  // 提交表单
}, 500));