纯JS实现搜索防抖：停止输入1秒后自动触发搜索请求

你需要的这套输入阶段判断逻辑是前端典型的防抖（debounce）应用场景，全程用原生JS即可实现，无需引入任何第三方库，以下是可直接落地的代码和逻辑说明。

完整实现代码 #

// 绑定搜索输入框，将选择器替换为你业务中实际的搜索框选择器即可
const searchInput = document.querySelector('#search-input');
// 定时器标识，用于存储、清除倒计时任务
let searchCountdownTimer = null;
// 搜索延迟时长，对应需求中的1s倒计时，单位为毫秒
const SEARCH_TRIGGER_DELAY = 1000;

/**
 * 实际执行搜索的方法
 * 内部替换为你业务中的ajax数据拉取、结果渲染逻辑即可
 */
function executeSearch() {
  const searchKeyword = searchInput.value.trim();
  // 以下为示例请求逻辑，按需替换
  console.log('停止输入1s，发起搜索，关键词：', searchKeyword)
  // fetch(`/your/search/api?keyword=${encodeURIComponent(searchKeyword)}`)
  //   .then(response => response.json())
  //   .then(searchResult => {
  //     // 渲染搜索结果的业务逻辑
  //   })
}

// 给搜索输入框绑定keyup事件监听
searchInput.addEventListener('keyup', () => {
  // 只要触发新的keyup事件，就清除之前未执行的倒计时，实现重置效果
  if (searchCountdownTimer) {
    clearTimeout(searchCountdownTimer);
  }
  // 启动新的1s倒计时，倒计时结束后执行搜索
  searchCountdownTimer = setTimeout(executeSearch, SEARCH_TRIGGER_DELAY);
})

逻辑匹配说明 #

代码完全覆盖你提出的三点需求：

• 首次触发keyup时，searchCountdownTimer初始值为空，不会执行清除操作，直接启动1s倒计时
• 后续每次触发keyup，都会先清除上一轮未走完的倒计时，重新创建新的1s定时任务，实现倒计时重置效果
• 用户持续输入时keyup会连续触发，定时器会被反复重置，永远不会走到执行搜索的逻辑；只有用户停止输入超过1s没有新的keyup事件，最后一轮定时器才会走完，触发搜索操作

可选优化 #

如果需要过滤不改变输入内容的按键操作（比如方向键、功能键触发的keyup），可以额外增加关键词比对逻辑，避免无效请求：

// 记录上一次实际发起搜索的关键词
let lastSearchedKeyword = '';

function executeSearch() {
  const searchKeyword = searchInput.value.trim();
  // 关键词和上次搜索完全一致时，直接终止不发请求
  if (searchKeyword === lastSearchedKeyword) return;
  lastSearchedKeyword = searchKeyword;
  // 原有搜索请求逻辑
}

内容的提问来源于stack exchange，提问作者deivkiau