为何触发三次API请求？如何实现输入停止后单次校验用户名

你的代码核心问题是每次输入都会创建新的定时器，旧的定时器没有被清除，导致多个定时器同时运行，到3秒后各自触发API请求；另外你用setInterval却调用了clearTimeout，这是API使用错误。

要实现「停止输入3秒后仅发一次请求」的防抖逻辑，正确的做法是：

• 把定时器变量放在函数外部，让每次输入都能访问并清除之前的定时器
• 每次输入时，先清除旧定时器，再重新设置新的延迟定时器
• 用setTimeout代替setInterval更合适，因为我们只需要延迟执行一次，不需要每秒计数

修改后的Vue代码（HTML部分不变） #

<input
    type="text"
    name="username"
    class="border pd5"
    v-model="username"
    required
    placeholder="Start typing and it will check if the username exists"
    @input="checkusername"
/>

修改后的JavaScript代码 #

const username = ref("");
// 把定时器变量提升到函数外部，保存上一次的定时器ID
let debounceTimer = null;

function checkusername() {
    // 先清除之前的定时器，重置计时
    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }

    if (username.value.length > 3) {
        // 设置新的3秒延迟定时器
        debounceTimer = setTimeout(() => {
            axios
                .get(`api/v1/users/check/username/${username.value}/`)
                .then((response) => {
                    console.log(response.data);
                })
                .catch((error) => {
                    console.log(error);
                });
        }, 3000);
    }
}

关键改动说明 #

• debounceTimer变量放在函数外部，确保每次输入都能获取到上一次的定时器ID，从而清除旧的计时
• 每次触发checkusername时，先执行clearTimeout(debounceTimer)，不管之前有没有定时器，这样就能重置计时
• 用setTimeout替代setInterval，不需要手动计数，直接设置3秒后执行请求逻辑，代码更简洁且符合需求
• 使用模板字符串拼接API地址，可读性更好

如果坚持要用setInterval的方式，需要把clearTimeout改成clearInterval，并且同样要在每次输入时清除旧的定时器，但显然setTimeout更适合这种防抖场景。

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