Tengo un cuadro de entrada de texto en VueJs para un ticket, que actualiza el ticket en la base de datos con la entrada después de que expire un setTimer (10000), sin embargo, cuando el temporizador expira si todavía está escribiendo a la mitad, se estremece y tiene que mirar. se volverá a cargar y se volverá a escribir frente a usted a medida que se activa la solicitud. Solo dura unos 3 segundos, pero eso es demasiado para mi caso de uso. ¿Cuál es la mejor manera de evitar este problema?
Código relevante (?)
<b-field label="Description"> <b-input type="textarea" v-model="strValue" :disabled="waiting.updateAttachment" > </b-input> </b-field>JS
strValue: { get: function () { return this.attachment.strValue; }, set: function (val) { let self = this; setTimeout(function(){ return self.updateAttachment([self.attachment.id, { strValue: val }]) },8000) }, },},
Hay muchas maneras de manejar el retraso de entrada para evitar esto, pero mirando su código, no estoy seguro de que realmente esté borrando su tiempo de espera al actualizar el valor de su entrada. Para evitar que se dispare en exceso, querrá asegurarse de cancelar la función de tiempo de espera antes de volver a configurarla con cada pulsación de tecla.
Por lo tanto, podría realizar un seguimiento de su tiempo de espera con un apoyo en los datos:
data() { return { strValue: '', inputTimeout: null }; }Y luego en tu función set:
set: function(val){ let self = this; self.strValue = val; clearTimeout(self.inputTimeout); self.inputTimeout = setTimeout(function() { // your update attachment function call goes here }, 1000); }Esto básicamente diría "espere 1 segundo después de que el usuario deje de escribir antes de actualizar el archivo adjunto". También puede usar un reloj en strValue y deshacerse del getter/setter explícito, ¡pero haga lo que le resulte más cómodo!