初识防抖节流，首次执行亦不凡

初识防抖节流

防抖和节流是两种常用的 JavaScript 技术，用于优化事件处理函数的执行。它们可以防止函数在短时间内被重复调用，从而提高应用程序的性能和用户体验。

• 防抖 (debounce) ：防抖函数会在一段时间内只执行一次，即使在该段时间内被多次触发。这对于防止因用户快速输入或连续点击而导致的重复操作很有用。

• 节流 (throttle) ：节流函数会在一定时间间隔内只执行一次，即使在该时间间隔内被多次触发。这对于防止因连续的事件触发而导致的性能问题很有用。

首次执行

在某些情况下，我们可能需要在首次触发事件时立即执行函数，然后按照防抖或节流的规则继续执行。这被称为首次执行。

实现首次执行的常见方法是使用一个标志变量来跟踪函数是否已被首次执行。在首次触发事件时，将标志变量设置为 true，并立即执行函数。在随后的触发事件中，检查标志变量是否为 true，如果是，则按照防抖或节流的规则执行函数；否则，什么都不做。

实现代码

// 防抖函数
const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
};

// 节流函数
const throttle = (func, wait) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      func(...args);
      lastCallTime = now;
    }
  };
};

// 首次执行函数
const executeOnce = (func, wait) => {
  let firstTime = true;
  return (...args) => {
    if (firstTime) {
      func(...args);
      firstTime = false;
    } else {
      debounce(func, wait)(...args);
    }
  };
};

应用场景

首次执行在许多场景中都有用武之地，例如：

• 搜索框自动完成：在用户输入时，防抖函数可以防止搜索结果频繁更新，从而提高用户体验。首次执行可以确保在用户第一次输入时立即显示搜索结果，而无需等待防抖时间。

• 表单验证：在用户输入时，节流函数可以防止表单验证函数被频繁调用，从而提高性能。首次执行可以确保在用户第一次输入时立即进行表单验证，而无需等待节流时间。

• 窗口大小变化事件处理：在窗口大小变化时，节流函数可以防止窗口大小变化事件处理函数被频繁调用，从而提高性能。首次执行可以确保在窗口第一次发生大小变化时立即执行窗口大小变化事件处理函数，而无需等待节流时间。

结语

防抖和节流是前端开发中必不可少的优化技巧，首次执行则为它们增添了新的维度。掌握这些技巧，可以帮助你编写出高效、流畅的应用程序。