巧用防抖和截流，让你的前端程序更流畅

2023-09-25 14:14:43

前言

在前端开发中，我们经常会遇到高频的异步触发场景。例如，按钮不停地提交表单（异步操作）、滚动条的上拉加载数据（异步操作）、输入框的搜索联想（异步操作）等。在这些场景中，如果我们不采取任何措施，就会导致事件被重复触发，从而对程序的性能造成影响。

防抖和截流都是用于解决高频异步触发问题的技巧。它们可以帮助我们只触发一次事件，从而提高程序的性能。

防抖

防抖（debounce）是一种常见的优化技巧。它的原理是，在一定时间内，如果事件被多次触发，那么只执行一次事件处理函数。

防抖的实现方式有很多种，最常见的一种是使用定时器。我们可以通过以下步骤来实现防抖：

定义一个定时器变量。
当事件触发时，清除定时器。
重新设置定时器，并在定时器到期后执行事件处理函数。

代码示例：

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

const button = document.querySelector('button');

button.addEventListener('click', debounce(() => {
  console.log('Button clicked!');
}, 500));

在这个示例中，我们使用 setTimeout() 函数来实现防抖。当按钮被点击时，我们会清除定时器，然后重新设置定时器。如果在定时器到期之前按钮又被点击，那么定时器会被再次清除，从而防止事件处理函数被多次执行。

截流

截流（throttle）也是一种常见的优化技巧。它的原理是，在一定时间内，只执行一次事件处理函数，即使事件被多次触发。

截流的实现方式也有很多种，最常见的一种是使用时间戳。我们可以通过以下步骤来实现截流：

定义一个时间戳变量。
当事件触发时，检查时间戳。
如果当前时间戳与上一次执行事件处理函数的时间戳相差超过一定时间，则执行事件处理函数。

代码示例：

function throttle(func, wait) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime > wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

const button = document.querySelector('button');

button.addEventListener('click', throttle(() => {
  console.log('Button clicked!');
}, 500));