Necesito actualizar o sobrescribir el valor de retraso de setTimeout. Tengo un botón de actualización de cantidad de producto:
<q-input class="q-pb-none" v-model="quantity" dense borderless style="width: 25px" mask="###" @input="updateQty" /> <div class="col-auto"> <div class="row"><q-icon name="keyboard_arrow_up" @click="quantity++" class="cursor-pointer"/></div> <div class="row"><q-icon name="keyboard_arrow_down" @click="quantity--" class="cursor-pointer"/></div> </div>No quiero hacer una solicitud de actualización cada vez que se hace clic en los botones de cambio de cantidad, en lugar de que esta siguiente función updateQty debería ejecutarse 3 segundos más tarde, el usuario se da por vencido para hacer clic en el botón.
updateQty () { // I need to refresh this timeout at evertime this function called. window.setTimeout(() => { this.$store.dispatch('pack/updateProductQty') }, 3000) }¿Cómo puedo configurar esta lógica? Yo uso el marco quasar vue.js. Gracias..
Puede establecer la identificación del tiempo de espera en una variable y borrar el tiempo de espera en cada clic:
let timeoutId; updateQty () { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = window.setTimeout(() => { this.$store.dispatch('pack/updateProductQty') }, 3000) }En mi humilde opinión, una solución más limpia sería usar Observables o una técnica similar.