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)
    })
}


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

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

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

Спасибо!
  • Вопрос задан
  • 204 просмотра
Пригласить эксперта
Ответы на вопрос 3
xmoonlight
@xmoonlight
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})
        })
    }
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
от 90 000 до 220 000 руб.
Posh Space Москва
от 160 000 до 180 000 руб.
21 июл. 2019, в 14:16
5000 руб./за проект
21 июл. 2019, в 13:57
1000 руб./за проект
21 июл. 2019, в 12:53
5000 руб./за проект