I have a text input box, which updates the 'ticket' with my the input when the timer finishes, instead of every keystroke which was the previous behaviour. However this causes a reload of the text input often while I am still using it.
I believe the best solution would be for the timer to reset every keydown event, but the few solutions I've tried haven't worked well, so I'd like to see if that's what is the most straightforward route to taker in my situation.
Relevant Code Below
strValue: {
get: function () {
return this.attachment.strValue;
},
set: function (val) {
let self = this; setTimeout(function(){ return self.updateAttachment([self.attachment.id, { strValue: val }]) },8000) },
},
Full section of code:
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) },
},
},
You can use clearTimeout(timer) as shown below:
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) },
},
},This is a very simple implementation of a throttled input. Please let me know if I'm missing something.
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 THISdiv {
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-->