How to eliminate chatter of live search?

Question

JavaScript

Colleagues, how to eliminate the chatter of live search?

Here are some details

events()
{
    this.$root.$on("on-root-main-search-change", async ({e, value, f}) => {
        let response = await Digest.fastSearch({
            q: value
        })

        f(response.items)
    })
}

It is clear that if you use the search button, then the search would also be initialized by clicking.
How to reduce the frequency of requests to the server?
For example, the user furiously hits the buttons and with each movement a request occurs.
The gif shows what I mean.
Not a pleasant sight.
Thank you!

Answer 1

debounce

Answer 2

1. Timeout (in 1 sec) for events from the UI or more than 3 characters (or a space character) => request to the server.
2. Use a local cache of requests and responses.

Answer 3

Here you should use throttle or debounce
https://lodash.com/docs/#throttle
https://lodash.com/docs/#debounce
Once upon a time I wrote a small library that just solves the search problem. It’s not that I suggest using it (although I would only be happy :) ), but there is a demo there that illustrates the operation of throttle: https://int0h.github.io/promise-decorators/
The library itself: https:// github.com/int0h/promise-decorators
Example with search: https://github.com/int0h/promise-decorators/blob/g... (live on the demo page)
Another good illustration is in rxmarbles: https:/ /rxmarbles.com/#debounce
(you can also solve this with rx)

Answer 4

Thanks everyone, it really helped.
When you stop tapping, the request is sent.

events()
    {

        let search = debounce(async ({e, value, f}) => {
            let response = await Digest.fastSearch({
                q: value
            })
            f(response.items)
        }, 1000)

        this.$root.$on("on-root-main-search-change", async ({e, value, f}) => {
            search({e, value, f})
        })
    }