Javascript:如何更新我的事件监听器,仅在用户STOPS键入时进行更改?

时间:2012-06-28 14:36:23

标签: javascript timer addeventlistener

我有这个事件监听器:

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

它控制滑块的位置 现在,如果我想在输入中输入“100”,滑块将跳转到“1”位置,然后跳到“10”,最后跳到“100”位置。 它非常笨重,我想给它一个更自然的感觉。

虽然我现在很自在地阅读JS,但我仍然是编写它的新手。

我理解这种类型的计时器所需的逻辑(如果计时器大于750毫秒 updateFromInput ),我只是有点朦胧如何开始编码JavaScript的。
当然,这种类型的计时器功能已经完成了一百万次,只有很多开发人员......只是努力找到一两个例子:)

非常感谢任何代码,链接或示例。

2 个答案:

答案 0 :(得分:2)

通常的方法是设置一个计时器,如果你看到另一个击键,取消之前的计时器并设置一个新计时器,例如:

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
}

这将使更新延迟50ms(setTimeout调用的值)。如果输入超过50毫秒,则会更新。

答案 1 :(得分:1)

我认为处理这个问题的更好方法是在关键时刻和关键时刻。这样,如果用户按下并按住键,则不会被误解。看看这个jsFiddle:

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

显然,您必须将其更改为添加事件侦听器(而不是HTML中的内联处理程序)。很明显,你会将警报改为你想要的任何东西。但希望这有助于你正在寻找的东西!