Angular中用户停止输入触发Subject：防抖时间异常问题求助

当然可以实现用户暂停输入500ms后触发请求的需求，你遇到的防抖时间异常增长问题，一般是因为防抖函数的实现有误，或者使用方式不对导致重复创建计时器。

正确的防抖函数实现 #

防抖的核心逻辑是：每次触发事件时，清除之前的定时器，重新设置一个新的定时器，只有当事件停止触发超过设定时间后，才会执行目标函数。

以下是一个可靠的原生JS防抖函数：

function debounce(func, delay) {
  let timerId;
  return function(...args) {
    // 清除上一次的定时器
    clearTimeout(timerId);
    // 重新设置新的定时器
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

正确的使用方式 #

关键是要提前创建防抖后的函数实例，而不是在每次输入事件触发时重新调用防抖函数，否则会生成多个独立的定时器，导致时间叠加的错觉。

示例代码：

// 先定义你的Ajax请求函数
function fetchData(inputValue) {
  // 这里写你的Ajax逻辑，比如用fetch或者XMLHttpRequest
  console.log('发起请求:', inputValue);
  // fetch('/api/search', {
  //   method: 'POST',
  //   body: JSON.stringify({ keyword: inputValue })
  // })
  // .then(res => res.json())
  // .then(data => { /* 处理返回数据 */ });
}

// 创建防抖后的请求函数，延迟500ms
const debouncedFetch = debounce(fetchData, 500);

// 给输入框绑定input事件
const inputBox = document.getElementById('search-input');
inputBox.addEventListener('input', function() {
  debouncedFetch(this.value);
});

为什么之前的防抖会出现时间增长？ #

如果你的代码是在input事件回调里每次都调用debounce(fetchData, 500)，比如：

// 错误示例！
inputBox.addEventListener('input', function() {
  debounce(fetchData, 500)(this.value);
});

这种写法会在每次输入时创建一个新的防抖函数实例，每个实例都有自己的定时器，多个定时器同时存在就会导致请求触发的时间越来越晚，看起来像是防抖时间指数增长。

只要把防抖函数的实例提前创建好，每次事件触发时调用同一个实例，就能保证只有一个定时器在工作，实现准确的500ms延迟触发。

内容的提问来源于stack exchange，提问作者Mohd Jawwad Hussain