Vue.js: запустить метод после задержки, но сбросить задержку, если пользовательский ввод происходит

Question

Vue.js: запустить метод после задержки, но сбросить задержку, если пользовательский ввод происходит

1

Предположим, у меня есть форма, которая извлекает и отображает информацию из API на основе ввода пользователем. Когда пользователь вводит свой запрос (для простоты, скажем, они меняют количество результатов на страницу), компонент должен реагировать и загружать новые данные. Я хочу дать пользователю буферную зону - скажем, 2 секунды. Если они вводят свой ввод и 2 секунды проходят без какого-либо нового ввода, компонент выполнит запрос axios. Однако, если в это время вводится больше ввода, "тайм-аут" сбрасывается на 2 секунды.

Я чувствую, что я бы использовал наблюдаемое свойство, чтобы справиться с этим, но я борюсь с реализацией. Там очевидный метод setTimeout, но это не позволит мне сбросить таймер - я бы назвал его несколько раз с задержкой в 2 секунды.

Как, используя Vue.js, я могу подождать ввода пользователя, а затем ждать 2 секунд бездействия (на этом компоненте), а затем выполнить запрос axios?

Соответствующий шаблон Vue:

<template>
    <input
        type="number"
        v-model.number="perPage" />    
</template>

Соответствующий скрипт Vue:

<script>
    export default {
        data: function () {
            return {
                perPage: 25,
            }
        },
        methods: {
            myAxiosCall() {

            }
        }
    }
</script>

CGriffin 24 окт. 2018, в 05:20

Источник

1

Возможно, вы захотите разобраться в разоблачении. Там хороший пример Документов
Husam Ibrahim 24 окт. 2018, в 02:30
0

Я нашел это - но похоже, что это добавляет время ожидания между запросами, поэтому первый запрос будет выполняться мгновенно, а затем задержка в 2 секунды между последующими запросами. Позволит ли debouncing добавить задержку к самому первому? (Я признаю, что на данный момент я немного перфекционист)
CGriffin 24 окт. 2018, в 02:32
1

Да, я просто не правильно прочитал документы. Потрясающие!
CGriffin 24 окт. 2018, в 02:35
0

Я думаю, что функция debounce в Lodash не сразу вызовет функцию, если вы не укажете для leading опции значение true.
Husam Ibrahim 24 окт. 2018, в 02:37

Показать ещё 2 комментария

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Возможно, вы захотите разобраться в разоблачении. Там хороший пример Документов
Я нашел это - но похоже, что это добавляет время ожидания между запросами, поэтому первый запрос будет выполняться мгновенно, а затем задержка в 2 секунды между последующими запросами. Позволит ли debouncing добавить задержку к самому первому? (Я признаю, что на данный момент я немного перфекционист)
Да, я просто не правильно прочитал документы. Потрясающие!
Я думаю, что функция debounce в Lodash не сразу вызовет функцию, если вы не укажете для leading опции значение true.

Mayank Kumar Chaudhari · Accepted Answer · 2018-10-24T00-22-00.000Z

Как вы указали, вы используете метод setTimeout().

Решение 1 - сделайте это внутри своего наблюдателя текста

сохраните результат setTimeout в переменной и используйте clearTimeout, когда вам нужно отменить. как это

let x = setTimeout(functionName, time);
//to clear -- when user starts typing clear the previously created timeouts
clearTimeout(x);

Решение 2

Используйте debounce (импорт lodash). Я нахожу сначала лучше. Там может быть много других подходов. Примите ответ, если это поможет.