Vue.js и lodash. Красота debounce при заполнении текстовых полей.

Когда нужен debounce?

Простой ответ - всегда, когда вы не хотите выполнять какую-то функцию слишком часто.

Например, пользователь что-то вводит в текстовое поле, и, на основании введенных символов, вы хотите показать ему какие-то подсказки. Подсказки вы запрашиваете с сервера.

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

Гораздо логичнее дождаться, когда пользователь перестанет печатать и после этого отправить запрос. Для этого нам и понадобится debounce.

Как он работает?

Debounce как бы откладывает выполнение функции. Вы указываете функцию и задержку, после которой надо выполнить эту функцию. Если задержка ещё не закончилась, а к функции обратились ещё раз, то функция не выполняется, а задержка начинает отсчитываться заново. Это идеально подходит для нашего примера с вводом пользователя. При каждом нажатии мы вызываем debounce функцию с задержкой, допустим, в 1 секунду. Если пользователь в течении секунды больше ничего не печатал, то функция выполнится, а если продолжит печатать (быстрее, чем одно нажатие в секунду), то будем ждать пока не пройдет секунда после последнего нажатия.

Как это реализовать в vue.js?

Честно говоря, этот пост появился именно потому, что мне очень понравилась простота, с которой это можно реализовать в vue.

Нам понадобится два метода и одно вычисляемое свойство.

Начнем с метода getTips (вставляю картинкой, чтобы сохранить подсветку):

Метод, который мы будем вызывать с помощью debounce

Этот метод нам нужно вызвать с использование debounce. Для этого используем функцию debounce из очень полезной js библиотеки lodash. Тут важный трюк - надо поместить вызов в вычисляемое свойство:

Добавили computed функцию debouncedGetTips

Осталось самое простое - обращаться к debounced функции при каждом изменении в поле ввода.

Создадим поле:

В поле добавили обработчик события @input, который будет выполнять функцию при каждом нажатии

И обработчик нажатий:

Вот и всё! Прилагаю примерный код:

Если остались вопросы, можете спрашивать в комментариях. Постараюсь ответить.