Tengo un cuadro de entrada de texto, que actualiza el 'boleto' con mi entrada cuando finaliza el temporizador, en lugar de cada pulsación de tecla que era el comportamiento anterior. Sin embargo, esto provoca una recarga de la entrada de texto a menudo mientras todavía lo estoy usando.
Creo que la mejor solución sería que el temporizador restableciera cada evento de pulsación de tecla, pero las pocas soluciones que he probado no han funcionado bien, por lo que me gustaría ver si esa es la ruta más sencilla para tomar en mi situación. .
Código relevante a continuación
strValue: { get: function () { return this.attachment.strValue; }, set: function (val) { let self = this; setTimeout(function(){ return self.updateAttachment([self.attachment.id, { strValue: val }]) },8000) }, },Sección completa del código:
computed: { ...mapGetters(['allDocumentTypeGroups', 'currentTicketCaseFiles', 'activeAttachmentIndex', 'showAttachmentsPreview', 'activeAttachments']), attachmentAcceptedLabel() { return this.attachmentAccepted ? this.t('accepted') : this.t('ignored'); }, attachmentAccepted: { get: function () { return !this.attachment.ignoreAttachment; }, set: function (val) { return this.updateAttachment([this.attachment.id, { ignoreAttachment: !val }]); }, }, documentType: { get: function() { return this.attachment.documentTypeId; }, set: function(val) { return this.updateAttachment([this.attachment.id, { documentTypeId: val }]); }, }, approveAttachment: { get: function() { return this.attachment.approvedAttachment; }, set: function(val) { return this.updateAttachment([this.attachment.id, { approvedAttachment: val }]); }, }, strValue: { get: function () { return this.attachment.strValue; }, set: function (val) { let timer; if(timer){ clearTimeout(timer); } let self = this; timer = setTimeout(function(){ return self.updateAttachment([self.attachment.id, { strValue: val }]) },8000) }, }, },Puede usar clearTimeout (temporizador) como se muestra a continuación:
let timer; strValue: { get: function () { return this.attachment.strValue; }, set: function (val) { if(timer){ clearTimeout(timer); } let self = this; timer = setTimeout(function(){ return self.updateAttachment([self.attachment.id, { strValue: val }]) },8000) }, }, },Esta es una implementación muy simple de una entrada limitada. Por favor, avíseme si me estoy perdiendo algo.
const input = document.getElementById('input'); const ticket = document.getElementById('ticket'); const threshold = 2000; let timeout = null; const onKeydownHandler = () => { // CLEAR PREVIOUS TIMEOUT WHEN A KEY IS PRESSED. clearTimeout(timeout); // "RESTART" THE TIMEOUT. timeout = setTimeout(() => { // UPDATE YOUR VALUE HERE. ticket.innerText = `Ticket Value: ${input.value}`; }, threshold); }; input.addEventListener('keydown', onKeydownHandler); // REMOVE THIS (() => { const counter = document.getElementById('counter'); let interval = null; let count = threshold; input.addEventListener('keydown', () => { clearInterval(interval); count = threshold; interval = setInterval(() => { count -= 50; counter.innerText = `Time Left: ${count}ms`; if (count <= 0) { clearInterval(interval); } }, 50); }); counter.innerText = `Time Left: ${count}ms`; })(); // REMOVE THIS div { margin: 20px; } <input id='input' type='text' placeholder='Start writing...'></input> <div> <span id='ticket'>Ticket Value:</span> </div> <!--REMOVE THIS--> <div> <span id='counter'></span> </div> <!--REMOVE THIS-->