Javascript：如何更新我的事件监听器，仅在用户STOPS键入时进行更改？

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, eg:

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.

Answer 2

I think the better way to handle this is both on key down and on key up. That way, in case the user presses and holds the key, it won't be misinterpreted. Take a look at this jsFiddle:

http://jsfiddle.net/9c46B/3/

Obviously, you'd have to change it to be adding event listeners (instead of inline handlers in the HTML). And obviously you'd change the alert to be whatever you want. But hopefully this helps and is what you're looking for!