Как реализовать debounce для поля ввода, чтобы ограничить количество вызовов API в JavaScript?

Question

[HNpis]

Я работаю над функцией поиска, где пользователь вводит текст в поле, и выполняется вызов API для получения подсказок. Сейчас API вызывается при каждом нажатии клавиши, что неэффективно. Я хочу реализовать debounce, чтобы API вызывался только после того, как пользователь перестанет вводить текст в течение определенного времени.

Могли бы вы объяснить, как сделать debounce на JavaScript? Вот код, который у меня есть:

const input = document.getElementById("search");

input.addEventListener("input", (e) => {
    fetchSuggestions(e.target.value); // This is being called on every keystroke
});

function fetchSuggestions(query) {
    console.log("Fetching suggestions for:", query);
    // Simulating an API call
}

Как я могу изменить этот код, чтобы добавить debounce для функции fetchSuggestions?

Comments

[Aetae]

var fetchSuggestionsDebounced = debounce(fetchSuggestions, 300);
input.addEventListener("input", (e) => {
    fetchSuggestionsDebounced(e.target.value); // This is being called on every keystroke
});

Саму функцию debounce подключаешь из lodash или из любой иной из 100500 библиотек, предоставляющих её из коробки.
Писать самостоятельно смысла ровно ноль.

Если интересно как работает - просто гугли "js debounce объяснение"\"пишем js debounce" и чтай любую из 100500 статей.

Answer 1

[Григорий Боев]

Отключать и ставить таймер на выполнение каждый вызов

const input = document.getElementById("search");
let searchdDebounceTimerHandler;

input.addEventListener("input", (e) => {
    clearTimeout(searchdDebounceTimerHandler); // Если ввод быстрый, удаляем выполнение функции каждый раз
    searchdDebounceTimerHandler = setTimeout(() => {
        fetchSuggestions(e.target.value);
    }, 1000); // Сработает через секунду от последнего нажатия
});

Answer 2

[Сергей delphinpro]

function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

input.addEventListener('input', debounce(e => {
    fetchSuggestions(e.target.value); // This is being called on every keystroke
}, 100));