前端条件竞态乱谈——可能被我误解的函数防抖

什么是条件竞态？

条件竞态是指多个操作的结果依赖于它们的执行顺序，而这个顺序是不确定的。在前端开发中，常见的条件竞态问题包括：

• 用户快速点击按钮触发多次请求
• 输入框内容变化触发多次搜索请求
• 滚动事件触发频繁计算

函数防抖的误解

我曾经认为防抖主要是为了减少函数调用次数，提高性能。但实际上，它更重要的作用是解决条件竞态问题。

// 常见的防抖实现
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}
      

通过防抖，我们可以确保只有最后一次操作会被执行，从而避免条件竞态问题。