Поиск как на тостере, как?

Question

[legacy_js]

Приветствую, сделал поиск как на тостере

function event_search(event) {
        let search_value = event.target.value;

        setTimeout(() => {
            axios.post(document.location.pathname, { search_value }, { headers })
                .then(function (res) {
                    console.log(res)
                    document.querySelector('#search').innerHTML = res.data
                })
                .catch(e => {
                    console.log(e)
                })
        },200)
    }
    btn_search.addEventListener('input', event_search, false);

но не могу понять как добиться что бы при быстром вводе текста не отправлялся запрос на каждую клавишу. В нетворке у тостера отправляется только один запрос, с текстом, а у меня на каждое нажатие клавиши. Пробовал разные события, помогите пожалуйста

Answer 1

[y0u]

Debounce

https://medium.com/nuances-of-programming/%D1%87%D...

Answer 2

[Сергей delphinpro]

let tm;

function event_search(event) {
    let search_value = event.target.value;

    clearTimeout(tm);
    tm = setTimeout(() => {
        axios.post(document.location.pathname, { search_value }, { headers })
            .then(function (res) {
                console.log(res)
                document.querySelector('#search').innerHTML = res.data
            })
            .catch(e => {
                console.log(e)
            })
    },200)
}

Comments

[legacy_js]

Благодарю

Answer 3

[bqio]

let inputListener;
let ms = 1500;
input.addEventListener('keyup', () => {
 clearTimeout(inputListener);
 inputListener = setTimeout(() => {
   // ajax
 }, ms);
});