JavaScript 防抖函数实现：优化性能，提高用户体验

防抖函数是一种常用的优化方法，可以避免在短时间内频繁触发某个函数而导致性能问题。下面是一个使用JavaScript实现的功能完备的防抖函数：

function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    const last = Date.now() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = Date.now();
    const callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}

这个防抖函数接收三个参数：

• func：要防抖的函数
• wait：等待时间，单位为毫秒
• immediate：是否立即执行

如果 immediate 设置为 true，则函数会在第一次触发时立即执行，不会等待 wait 时间。如果设置为 false 或不传入该参数，则函数会在最后一次触发后等待 wait 时间再执行。

在函数内部，使用闭包保存了 timeout、args、context、timestamp 和 result 这些变量。在每次函数被触发时，都会更新这些变量的值，并根据 immediate 和 timeout 的状态来决定是否调用 func。如果 timeout 存在，则表示函数已经被触发过了，需要等待 wait 时间再执行；如果不存在，则表示函数尚未被触发，需要创建一个新的 timeout 并设置等待时间；如果 immediate 为 true，还需要在第一次触发时立即执行。

使用这个防抖函数非常简单，只需要把要防抖的函数和等待时间传入即可。例如：

const debouncedFn = debounce(myFunction, 500);

这样就创建了一个防抖的函数 debouncedFn，它会在 myFunction 被触发后等待 500 毫秒再执行。如果需要立即执行，可以设置 immediate: true：

const debouncedFn = debounce(myFunction, 500, true);

这样 myFunction 就会在第一次触发时立即执行，然后在接下来的 500 毫秒内不会再次执行，直到最后一次触发后再执行一次。