javascript - 在调用另一个 keyup 之前清除堆栈 - Javascript

Question

我写了一段代码，每次输入字段的值发生变化时获取值，延迟 500 毫秒（检查用户是否还在添加更多值），然后使用该值从 API 获取数据。该代码有效，当完成输入值时它会获取数据，但在指定的延迟时间之后，它会使用先前的值再次获取。

假设我想在输入字段中输入 1-10，但是在 8 时，我等了一会儿才继续输入 9，当我到达 10 时，它会在指定的延迟时间后获取数据。一段时间后，它恢复到我在 8 点等待并获取该点的值。

我的代码：

function delay(fn, ms) {
    var timer = 0
    return function(...args) {
        clearTimeout(timer)
        timer = setTimeout(fn.bind(this, ...args), ms || 0)
    }
}


$("#acctNumber").on("keyup", delay(function(){
    url = '...'
    const fetchBankDetails = fetch(url)
    .then((res) => res.json())
    .then((data) => {
        return data
    });

    const detailFetchRes = async () => {
        const data = await fetchBankDetails;
        console.log(data)
    }
    detailFetchRes();
}, 500))

当我尝试时到达我的服务器的请求1445665997：

web_1        | [18/Jul/2021 21:25:21] "GET /api/fetch/account/1445665997/044 HTTP/1.1" 200 137
web_1        | [18/Jul/2021 21:25:31] "GET /api/fetch/account/1445665/044 HTTP/1.1" 200 108