如何檢測用戶何時停止輸入 JavaScript

監聽擊鍵事件是很常見的（keypress , keyup , 和 keydown ) 輸入元素以執行不同的任務。但有時，您想知道用戶何時停止在輸入字段中輸入文本。

假設您的網站上有以下 HTML 搜索表單：

<form>
    <input type="search" id="input-text" placeholder="Start typing....">
</form>

我們希望在此表單中添加實時搜索，並在用戶鍵入時顯示搜索結果。一種可能的方法是附加 keyup input 的事件 元素並針對輸入的每個字符向服務器發送一個 HTTP 請求以獲取搜索結果：

const input = document.querySelector('#input-text');

// Listen for `keyup` event
input.addEventListener('keyup', (e) => {
    const text = e.currentTarget.value;
    // TODO: Make HTTP Request Here
});

上述解決方案應該可以正常工作，但它不是解決此問題的最佳方法。隨著用戶不斷輸入，您最終會向服務器發送數十個並發請求。

通過一些修改，我們可以輕鬆地使上述代碼更實用、更高效。

這個想法是跟踪用戶的輸入，並且只在用戶停止輸入時才發出 HTTP 請求：

let timer;              // Timer identifier
const waitTime = 500;   // Wait time in milliseconds 

// Search function
const search = (text) => {
    // TODO: Make HTTP Request HERE
};

// Listen for `keyup` event
const input = document.querySelector('#input-text');
input.addEventListener('keyup', (e) => {
    const text = e.currentTarget.value;

    // Clear timer
    clearTimeout(timer);

    // Wait for X ms and then process the request
    timer = setTimeout(() => {
        search(text);
    }, waitTime);
});