我有这个功能来检查用户名是否存在。它应该只在用户停止输入后运行。所以每次用户输入时，计时器都会重置，只有当它达到3秒时，才会向服务器发送GET请求。它的工作原理是，我可以看到计数器从1计数到3，然后它停止计数。如果我再次输入，计数器会重新开始。只有当我停止足够长的时间，计数器才会达到3。为什么如果我在控制台中查看，有3个请求（输入3个字母超过3）到API，而不是只有一个。所以即使计时器没有达到3，它也会发送请求。所以即使重新启动，计数器也会继续计算用户输入字符的给定时间？
下面是我的代码：
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("")

function checkusername() {
    if (username.value.length > 3) {
        let time = 0;
        let timer = setInterval(function () {
            time = time + 1;
            console.log(time);
            if (time === 3) {
                clearTimeout(timer);
                axios
                    .get("api/v1/users/check/username/"+ username.value + "/")
                    .then((response) => {
                        console.log(response.data);
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        }, 1000);
    }
}

我尝试过其他的解决方案，但是因为每次用户输入时都会调用该函数，所以它们对我不起作用，并且它们都多次调用API，这就是为什么我创建了这个，但似乎无论函数调用触发API调用，即使计数器从未达到3。