IgorPI
@IgorPI

Как исключить дребезг живого поиска?

Коллеги, как исключить дребезг живого поиска?
5d28daa793034490732336.gif

Вот некоторые детали
events()
{
    this.$root.$on("on-root-main-search-change", async ({e, value, f}) => {
        let response = await Digest.fastSearch({
            q: value
        })

        f(response.items)
    })
}


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

Как снизиться частоту обращений на сервер?
Вот например, пользователь яростно колотит по кнопкам и при каждом движении происходит запрос.

На гифке видно, что я имею в виду.
Не приятное зрелище.

Спасибо!
  • Вопрос задан
  • 229 просмотров
Пригласить эксперта
Ответы на вопрос 3
xmoonlight
@xmoonlight Куратор тега JavaScript
https://sitecoder.blogspot.com
1. Timeout (в 1 сек) по событиям от UI или более 3-х символов (или символ "пробела") => запрос на сервер.
2. Использовать локальный кэш запросов и ответов.
Ответ написан
@Interface
Тут стоит использовать throttle или debounce
https://lodash.com/docs/#throttle
https://lodash.com/docs/#debounce

Когда-то давно я писал маленькую библиотеку, которая как раз решает задачу с поиском. Я не то чтобы предлагаю ее использовать (хотя я был бы только рад :) ), но зато там есть демо, где иллюстрируется работа throttle: https://int0h.github.io/promise-decorators/
Сама библиотека: https://github.com/int0h/promise-decorators
Пример с поиском: https://github.com/int0h/promise-decorators/blob/g... (живьем есть на демо странице)

Еще хорошая иллюстрация есть в rxmarbles: https://rxmarbles.com/#debounce
(можно это же решать rx'ом)
Ответ написан
IgorPI
@IgorPI Автор вопроса
Всем, спасибо, действительно помогло.

Когда перестаёшь тапать, запрос отправляется.
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})
        })
    }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы