Vue 3输入框的防抖未正确工作

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

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

解决方案

在这里，setTimeout() 在每次迭代后未被清除

let debounceTimer = null

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

function debounceFetch(val) {
  clearTimeout(debounceTimer)

  debounceTimer = setTimeout(() => {
    fetchData(val)
  }, 500)
}

每次watch触发debounceFetch() 时，都会创建一个setTimeout()，最终导致多次请求被发送。

我们需要做的是清除之前创建的setTimeout()。