如何只在用户停止输入 JavaScript 后执行函数

导语
在编写前端代码时，我们经常会遇到这样的场景：需要在用户输入文本框时实时执行某些操作，比如搜索或自动完成。然而，如果用户输入的速度过快，则会触发大量的函数调用，这可能导致性能问题和不必要的计算。为了解决这个问题，我们可以使用防抖或节流技术来优化函数的执行时机。

正文
1. 防抖 (Debounce)
防抖是一种技术，它可以确保函数在一定时间内只执行一次。也就是说，如果在函数执行之前，又触发了该函数，那么之前的函数调用将被取消，只有最新的函数调用才会执行。

防抖的原理很简单：创建一个定时器，并在每次函数被触发时重置该定时器。如果在定时器到期之前，函数又被触发，那么之前的定时器将被取消，并创建一个新的定时器。这样，函数就只会在定时器到期后执行一次。

防抖的优点在于，它可以有效地减少函数调用的次数，从而提高性能。此外，防抖还可以在用户输入文本框时提供更好的用户体验，因为用户不必等待函数每次都被触发。

防抖的缺点在于，它可能会导致函数执行延迟。也就是说，如果用户在很短的时间内多次触发函数，那么函数可能需要等到一段时间后才会执行。

2. 节流 (Throttle)
节流是一种技术，它可以确保函数在一定时间内只执行一次。与防抖不同的是，节流不会取消之前的函数调用，而是会延迟函数的执行。也就是说，如果在函数执行之前，又触发了该函数，那么之前的函数调用不会被取消，但新的函数调用将被延迟，直到之前的函数调用执行完毕。

节流的原理也很简单：创建一个定时器，并在每次函数被触发时重置该定时器。如果在定时器到期之前，函数又被触发，那么新的函数调用将被延迟，直到之前的函数调用执行完毕。

节流的优点在于，它可以确保函数在一定时间内只执行一次，从而提高性能。此外，节流还可以防止函数在用户输入文本框时被频繁触发，从而提高用户体验。

节流的缺点在于，它可能会导致函数执行延迟。也就是说，如果用户在很短的时间内多次触发函数，那么函数可能需要等到一段时间后才会执行。

选择哪种技术？
防抖和节流都是有用的技术，但在不同的场景下，它们各有优缺点。一般来说，如果我们希望函数只执行一次，并且不需要立即执行，那么可以使用防抖。如果我们希望函数在一定时间内只执行一次，并且需要立即执行，那么可以使用节流。

代码示例

// 防抖
const debounce = (func, wait) => {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func(...args);
      timer = null;
    }, wait);
  };
};

// 节流
const throttle = (func, wait) => {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime >= wait) {
      func(...args);
      lastTime = now;
    }
  };
};

// 使用防抖
const searchInput = document.getElementById('search-input');
const debouncedSearch = debounce((event) => {
  const query = event.target.value;
  // 在这里执行搜索操作
}, 500);
searchInput.addEventListener('input', debouncedSearch);

// 使用节流
const resizeHandler = () => {
  // 在这里执行调整窗口大小的操作
};
const throttledResizeHandler = throttle(resizeHandler, 200);
window.addEventListener('resize', throttledResizeHandler);

结语
防抖和节流都是非常有用的技术，它们可以帮助我们优化函数的执行时机，提高性能和用户体验。在实际开发中，我们可以根据具体的需求选择合适的技术来使用。