Vuejs клавиатура, штрих-код читается более 13 раз

Question

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

<div id="app">
    <input 
        type="text"
        v-on:keyup="barcode"
    >
</div>

vuejs код:

<script>
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            barcode(){
                setTimeout(() => {
                    console.log('number of times executed');
                }, 3000);
            }
        }
    })
</script>

консоль:

number of times executed                      (17) keyup.html:26:33

Мне нужно только один раз отправить запрос по многим причинам, например, из-за ошибки 429 и c.

Спасибо за ваше время!

Answer 1

Понять, что происходит

1. Сканер - это периферийное устройство, которое функционирует как клавиатура.
2. После сканирования штрих-кода, сканер отправляет нажатия клавиш в быстрой последовательности на ваш компьютер.
3. Это приводит к тому, что метод вызывается 13 раз после тайм-аута.
4. Понятно, что конечная точка, с которой вы связываетесь, отправляет обратно ошибку 429 - Too Many Requests.

Решение

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

var app = new Vue({
    el: '#app',
    data: {},
    methods: {
        barcode() {
            // We sent a keyup event and a timer is still active
            if(this.timer) {
                // So we clear and null it so it doesn't contact the api
                clearTimeout(this.timer);
                this.timer = null;
            }
            this.timer = setTimeout(() => {
                // contact your endpoint here

                // Assuming your scanner can emit keystrokes
                // within 100 milliseconds from one another
                // otherwise increase this value as necessary
            }, 100);
        }
    }
});