0

Есть input для ввода текста:

<input type="search" class="input_search"
    autocomplete="off"
    v-model.trim="query"
    placeholder="Поиск по названию"
    @keyup="sendSearch">
<!-- @change="sendSearch"> -->

Дата:

data() {
    return {
      query: '',
      res: [],
    }
  },

И метод:

async sendSearch() {
  console.log( this.query )
  // this.res = await postSearchByTitles(this.query)
  // setTimeout(() => console.log( this.query ), 1000)
},

И функция для связи с бэкендом

import { postSearchByTitles } from '~/services/api'
// Поиск постов по названиям (title - мультиязычное)
// export async function postSearchByTitles(title) {
//     return await get(`posts/search/${title}`)
// }

Сейчас функция поиска срабатывает либо при вводе каждого символа (@keyup) и отправляет кучу последовательных запросов к API (что нагружает бэкенд), либо по нажатию на кнопку "Enter"/или в пустую область (событие @change), что в моём случае тоже не совсем правильно.

Вопрос:

  1. Как изменить метод "sendSearch()" таким образом, что бы он выполнялся к примеру не чаще 1 раза в секунду при вводе текста?
  2. Или что лучше всего по окончанию ввода поиска (но тут абстракция т.к. мы не знаем закончил пользователь ввод или нет, а клик мимо поиска не всегда значит окончание поиска)
2
  • почитай про throttle и debounce Commented 11 апр. 2022 в 8:00
  • Спасибо, по вашей подсказке понял, что надо использовать тротл, но не стал писать функцию с нуля, а просто подключил из npm lodash.throttle
    – Igor
    Commented 11 апр. 2022 в 15:22

1 ответ 1

0

Собственно, сам же и отвечу. Для конкретного случая, что бы выполнить задержку к примеру в 1 секунда, сделал следующее:

  1. Установил npm пакет: npm i lodash.throttle (либо можно установить пакет lodash целиком npm i lodash)

  2. Подключаем import throttle from 'lodash.throttle'

  3. Создаём вычисляемое свойство computed:

     throttledSend() { return throttle(this.sendSearch, 1000) }
    
  4. input заменяем на следующий (к примеру): <input type="text" v-model.trim="query" @input="throttledSend">

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.