如何获取用户完整一致的搜索查询？最佳实践探讨

背景 #

我开发了一款加载Google Sheets数据的Web应用，数据已转换为对象数组并接入miniSearch工具。目前通过1500ms防抖机制，在用户停止输入1.5秒后获取搜索框内容，将未重复的查询存入STATE.searchQueries。该方案虽可行，但希望优化，特此咨询获取用户完整一致搜索查询的最佳实践。

当前实现代码 #

HTML

<input id="search" class="form-control me-2 w-50" type="search" aria-label="Search">

JavaScript

const debounce = (func, delay) => {
  let debounceTimer
  return function() {
    const context = this
    const args = arguments
    clearTimeout(debounceTimer)
    debounceTimer
      = setTimeout(() => func.apply(context, args), delay)
  }
}

$('#search').on('keyup', debounce((e) => {
  STATE.searchQueries.includes(e.target.value) ? null : STATE.searchQueries.push(e.target.value)
}, 1500))

优化方案 #

1. 结合防抖与主动触发（回车/搜索按钮） #

防抖适合处理用户连续输入后的自动搜索，但用户明确的提交动作（回车、点击搜索按钮）应该立即捕获查询，无需等待延迟：

• 新增回车事件监听，触发时清除防抖定时器，直接处理当前输入
• 统一查询处理逻辑，避免代码重复

// 统一处理搜索查询的函数
const processSearchQuery = (query) => {
  const trimmedQuery = query.trim()
  if (!trimmedQuery) return // 过滤空输入
  if (!STATE.searchQueries.includes(trimmedQuery)) {
    STATE.searchQueries.push(trimmedQuery)
    // 这里可同步触发miniSearch的搜索逻辑
  }
}

// 改造防抖函数，暴露定时器以便外部清除
const debounce = (func, delay) => {
  let debounceTimer
  const debouncedFn = function() {
    const context = this
    const args = arguments
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => func.apply(context, args), delay)
  }
  // 暴露定时器引用
  debouncedFn.clearTimer = () => clearTimeout(debounceTimer)
  return debouncedFn
}

const debouncedProcess = debounce((e) => {
  processSearchQuery(e.target.value)
}, 1500)

// 绑定事件
$('#search')
  .on('keyup', debouncedProcess)
  .on('keydown', (e) => {
    if (e.key === 'Enter') {
      debouncedProcess.clearTimer()
      processSearchQuery(e.target.value)
      e.preventDefault() // 阻止默认表单提交（若存在）
    }
  })

2. 优化重复查询检测性能 #

当前使用数组includes方法判断重复，当查询记录较多时会产生O(n)的性能损耗，改用Set存储可将判断和插入操作降到O(1)：

// 把STATE.searchQueries从数组改为Set
STATE.searchQueries = new Set()

const processSearchQuery = (query) => {
  const trimmedQuery = query.trim()
  if (trimmedQuery) {
    STATE.searchQueries.add(trimmedQuery)
  }
}

// 若需要转为数组使用，可通过Array.from(STATE.searchQueries)

3. 处理输入框失焦场景 #

当用户点击页面其他区域导致输入框失焦时，若存在未处理的输入，也应将其作为完整查询捕获：

$('#search').on('blur', (e) => {
  debouncedProcess.clearTimer()
  processSearchQuery(e.target.value)
})

4. 动态调整防抖延迟 #

根据用户输入速度动态调整防抖延迟，平衡响应速度和查询完整性：

• 用户连续快速输入时，缩短延迟，更快反馈
• 用户输入间隔较长时，保持稍长延迟，避免捕获不完整的中间输入

let lastInputTimestamp = Date.now()
const debouncedProcess = function(e) {
  const currentTimestamp = Date.now()
  // 计算两次输入间隔，动态设置延迟
  const dynamicDelay = currentTimestamp - lastInputTimestamp > 500 ? 1200 : 600
  lastInputTimestamp = currentTimestamp

  clearTimeout(this.debounceTimer)
  this.debounceTimer = setTimeout(() => {
    processSearchQuery(e.target.value)
  }, dynamicDelay)
}
// 注意：这种方式无需改造原防抖函数，直接自定义防抖逻辑即可

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