Javascript:如何更新我的事件侦听器，使其仅在用户停止键入时进行更改

Javascript: How do I update my Event Listener to only make a change when the user STOPS typing?

本文关键字：用户 何更新 更新 侦听器 事件 我的 Javascript      更新时间：2023-09-26

我有这个事件侦听器： 

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

它控制滑块的位置。
现在，如果我想在输入中输入"100"，滑块将从跳转到"1"位置开始，然后跳到"10"，最后跳到"100"位置。
它很笨重，我想给它一种更自然的感觉。

虽然我现在读JS很舒服，但我仍然是编写它的新手。

我了解这种类型的计时器所需的逻辑（如果计时器大于 750ms updateFromInput），我只是有点模糊如何开始在 javascript 中编码。
当然，这种类型的计时器功能之前已经被同样多的开发人员做过一百万零一次......只是努力寻找一两个例子:)

任何代码、链接或示例将不胜感激。

通常的方法是设置一个计时器，如果您看到另一个击键，请取消以前的计时器并设置一个新的计时器，例如：

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
}

这将使更新延迟 50 毫秒（setTimeout调用的值）。如果超过 50 毫秒没有看到输入，它将更新。

我认为处理这个问题的更好方法是同时按下键和向上键。这样，如果用户按住该键，它就不会被误解。看看这个jsFiddle：

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

显然，您必须将其更改为添加事件侦听器（而不是 HTML 中的内联处理程序）。显然，您会将警报更改为您想要的任何内容。但希望这有所帮助，并且正是您正在寻找的！

相关文章：