Question

I have this event listener:

input_1.addEventListener('input',function(){
    updateFromInput(1);
},false);

It controls the location of a slider.
Right now, if I want to type “100” into the input, the slider will start by jumping to the “1” position, then jump to “10”, then finally jump to the “100” position.
It’s pretty clunky, and I’d like to give it a more natural feel.

While I’m now pretty comfortable reading JS, I’m still quite the novice in writing it.

I understand the logic needed for this type of timer (if timer is greater than 750ms updateFromInput), I’m just a bit hazy how to start coding that in javascript.
Certainly this type of timer functionality has been done a million and one times before by just as many developers … just struggling to find an example or two 🙂

Any code, links, or examples would be greatly appreciated.

Answer 1

The usual way would be to set a timer, and if you see another keystroke, cancel the previous timer and set a new one, e.g.:

var timer = 0;
input_1.addEventListener('input',function(){
    maybeUpdateFromInput(1);
},false);

function maybeUpdateFromInput(val) {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        updateFromInput(val);
        timer = 0;
    }, 50); // 50 = 50ms, you may want 75, 100, even 125
}

That will delay the update by 50ms (the value on the setTimeout call). If it doesn’t see input for more than 50ms, it will then update.