Vue 3 输入框防抖功能异常，请求技术排查

在Vue 3项目中通过watch监听searchQuery，结合setTimeout实现输入框防抖时功能未生效，原代码如下：

watch(searchQuery, (newVal) => {
  debounceFetch(newVal)
})

function debounceFetch(val) {
  setTimeout(() => {
    fetchData(val)
  }, 500)
}

问题原因 #

当前写法的核心问题是每次触发watch都会创建一个全新的setTimeout定时器，且不会取消之前未执行的定时器。这导致用户输入过程中每输入一个字符，就会生成一个延迟500ms的任务，最终所有任务都会依次执行，根本没有实现“防抖”（仅在停止输入后执行一次）的效果，反而变成了批量延迟执行。

修复方案 #

要实现真正的防抖，需要维护一个全局的定时器ID，每次触发防抖逻辑时先清除之前的定时器，再创建新的定时器。同时要注意在组件卸载时清除定时器，避免内存泄漏。

修改后的代码示例：

import { watch, ref, onUnmounted } from 'vue'

const searchQuery = ref('')
// 存储定时器ID，用于后续清除
let debounceTimer = null

watch(searchQuery, (newVal) => {
  debounceFetch(newVal)
})

function debounceFetch(val) {
  // 清除之前未执行的定时器
  if (debounceTimer) clearTimeout(debounceTimer)
  // 创建新的定时器，500ms后执行请求
  debounceTimer = setTimeout(() => {
    fetchData(val)
  }, 500)
}

// 组件卸载时清除定时器，避免内存泄漏
onUnmounted(() => {
  if (debounceTimer) clearTimeout(debounceTimer)
})

说明 #

修改后，用户输入过程中每输入一个字符，都会取消之前尚未执行的定时器，只有当用户停止输入满500ms后，才会触发fetchData请求，完全符合防抖的预期效果。

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