Как исключить запросы к серверу, пока перемещается range?

Question

[Sergey750il]

Доброго времени суток. Использую multi-range-slider-vue, но так получается, что он отправляет запрос при каждом шаге перемещения, а нужно, что бы отправил когда пользователь отожмет кнопку мыши. Можно ли это как то сделать?

Comments

[Алексей Ярков]

он отправляет запрос при каждом шаге перемещения

Он сам по себе ничего никуда не отправляет. Это делает код, который написали вы, но показывать его вы не захотели ))

[Sergey750il]

<MultiRangeSlider baseClassName="multi-range-slider" :min="0" :max="100" :step="1" :ruler="false" :label="false" :minValue="10" :maxValue="70" @input="UpdateValues($event, item.id)" />

Алексей Ярков,

async UpdateValues(e, id) {
            if (id == 0) {
                console.log('change', e.maxValue)
                console.log('ide', id)
                this.form.cost_from = e.minValue
                this.form.cost_til = e.maxValue
               
            } else {
                 const index = this.form.params.findIndex(element => element.id == id);
                 if (index == -1) {
                    this.form.params.push({
                        id,
                        value: [e.minValue, e.maxValue],
                        is_range: true
                    })
                } else {                
                   this.form.params[index]['value'] = [e.minValue, e.maxValue]
                }
            }
             await this.$store.dispatch('categories/actionGetGoodsCat', this.form);

        },

[Алексей Ярков]

Sergey750il, ну всё верно. Вы слушаете событие @input, оно возникает при перетаскивании ползунка. Читайте документацию, ищите другое событие типа @change.

Ну либо как подсказал товарищ Ice Даже более верное решение будет.

[Sergey750il]

Алексей Ярков,
Да в том то и дело, что других событий в док плагина нет.

Answer 1

[Ice]

Используйте debounce (или throttle), оберните ваш запрос к серверу
для примера можете взять готовый из библиотеки lodash или underscore