泥泞深坑中的 Vue Debounce

2023-10-05 05:25:39

在编程的世界里，坑无处不在，尤其是当你踏入 Vue 的领域，debounce 就是一个不容忽视的深坑。debounce，一个看似简单的函数，却能让你在代码的汪洋中迷失方向。它就像一个海市蜃楼，引诱你走向错误的道路，让你在无尽的调试中苦苦挣扎。

我曾经也是一个掉入 debounce 深坑的开发者，在一次项目中，我需要在页面中使用两个 Chart 组件。这两个组件都会监听 window.resize 事件，并在控制台输出 "resize"。为了防止事件频繁触发，我决定使用 debounce 函数来优化代码。

// 定义 debounce 函数
const debounce = (func, wait) => {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
};

// 使用 debounce 函数优化代码
window.addEventListener('resize', debounce(() => {
  console.log('resize');
}, 500));

乍一看，这段代码似乎没有问题。然而，它却隐藏着一个致命的陷阱。由于两个 Chart 实例中的 resize 会调用同一个 debounce 函数，因此当其中一个组件触发 window.resize 事件时，另一个组件的 resize 事件也会被延迟执行。这导致两个组件的 resize 事件无法同时触发，从而导致页面布局出现问题。

为了解决这个问题，我尝试了各种各样的方法，从修改 debounce 函数的实现，到使用不同的事件监听器，但都无济于事。直到后来，我终于意识到，问题的根源在于我使用了同一个 debounce 函数。

// 为每个 Chart 实例创建一个独立的 debounce 函数
const debounce1 = debounce(() => {
  console.log('resize Chart 1');
}, 500);

const debounce2 = debounce(() => {
  console.log('resize Chart 2');
}, 500);

// 使用独立的 debounce 函数监听事件
window.addEventListener('resize', debounce1);
window.addEventListener('resize', debounce2);