Javascript 当某人停止键入1秒时触发功能

我有一个输入字段，当有人开始打字时，它会自动生成建议。用户无需模糊或点击提交按钮即可显示建议

当有人停止输入时，我想运行一个函数来跟踪向用户显示了哪些产品，以及当前输入字段中的文本字符串

我添加了一个“输入”事件侦听器，但我无法正确地获取逻辑

如果上次输入事件发生后至少1秒，我想查看

doStuff（）

。问题是，我的脚本是在用户开始键入而不是之后启动的，因为它基于“更改”事件侦听器

我想一定有比我现在做的更合乎逻辑的方法

我还担心“输入”事件会影响用户的浏览器，因为它会在每次击键时运行，也许有更好的方法

不情愿地在下面显示我的代码块，尽管它没有多大意义，而且是我较弱的脚本编写时刻之一，更多地表明我一直在尝试不同的事情。我更喜欢忽略我一直使用的疯狂逻辑的解决方案

我想

doStuff（e）

当用户“停止在输入中输入文本”时，这不是一个精确的定义。用户何时被视为已停止键入？现在我说的是1秒钟

不想使用change event，因为它会错过很多用户不会模糊的事件

喜欢纯JS

  var input = document.querySelector('#search_input');
  var newinput;
  var lastinput;
  var diff;

        input.addEventListener('input', function(e) {

          newinput = new Date();
          if(!lastinput) {
            lastinput = new Date()
          }
          diff = newinput - lastinput;
          if(diff > 500 && diff < 2000) {
            doStuff(e)
          }

          lastinput = newinput;

        }, false);

var input=document.querySelector（'search#u input'）；
var新输入；
var输入；
var-diff；
input.addEventListener（'input'，函数（e）{
newinput=新日期（）；
如果（！lastinput）{
lastinput=新日期（）
}
diff=newinput-lastinput；
如果（差值>500和&diff<2000）{
多斯塔夫（e）
}
lastinput=新输入；
}，假）；

您可以将

输入

事件侦听器与和一起使用，如下所示：

var timeoutID；
document.querySelector（“#search_input”）.addEventListener（'input'，function（e）{
clearTimeout（timeoutID）；
timeoutID=setTimeout（函数（）{
警报（“收到任何输入后已过1秒”）；
//多斯塔夫（）
}, 1000);
});
您可以将
输入
事件侦听器与和一起使用，如下所示：


var timeoutID；
document.querySelector（“#search_input”）.addEventListener（'input'，function（e）{
clearTimeout（timeoutID）；
timeoutID=setTimeout（函数（）{
警报（“收到任何输入后已过1秒”）；
//多斯塔夫（）
}, 1000);
});
这种技术有时被称为“去抖动”。虽然很多库（如下划线或Lodash）都有这种功能，但在纯javascript中可以相当容易地完成。它包装了一个函数，该函数将在超过去盎司时间时调用。它涉及使用
setTimeout（）
并在每次对输入触发事件时清除和重置超时。如果事件中存在延迟，并且超过了超时时间，则最终将触发取消公告功能

发件人：

使用它：

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

element.addEventListener('keyup', myEfficientFn);

在您的情况下，您需要将事件添加到
keyup
，
keydown
，
更改
，
剪切
，
复制
，
粘贴
，等等

element.addEventListener('keyup', myEfficientFn);
element.addEventListener('keydown', myEfficientFn);
element.addEventListener('change', myEfficientFn);
// etc...

这种技术有时被称为“去抖动”。虽然很多库（如下划线或Lodash）都有这种功能，但在纯javascript中可以相当容易地完成。它包装了一个函数，该函数将在超过去盎司时间时调用。它涉及使用
setTimeout（）
并在每次对输入触发事件时清除和重置超时。如果事件中存在延迟，并且超过了超时时间，则最终将触发取消公告功能

发件人：

使用它：

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

element.addEventListener('keyup', myEfficientFn);

在您的情况下，您需要将事件添加到
keyup
，
keydown
，
更改
，
剪切
，
复制
，
粘贴
，等等

element.addEventListener('keyup', myEfficientFn);
element.addEventListener('keydown', myEfficientFn);
element.addEventListener('change', myEfficientFn);
// etc...

您可以尝试
window.setTimeOut（）在事件键向上之后@用户3502626请写一个正确的答案。不要对此使用注释。@user3502626在这种情况下没有按键事件在描述用户“键入”的情况下怎么可能没有按键事件？有按键和释放事件。我要为你写一个代码你可以试试
window.setTimeOut（）在事件键向上之后@用户3502626请写一个正确的答案。不要对此使用注释。@user3502626在这种情况下没有按键事件在描述用户“键入”的情况下怎么可能没有按键事件？有按键和释放事件。我要给你写个密码这太棒了！经过测试，效果很好-谢谢。更具哲理的是，使用“输入”事件是否被认为是一种不好的做法，因为它会给用户浏览器带来压力？@DougFir-没关系。它不应该给浏览器带来压力。@DougFir您的压力更小，因为在超过延迟之前，您在触发每个事件时所做的工作更少。感谢您的反馈，这非常有用。这太棒了！经过测试，效果很好-谢谢。更具哲理的是，使用“输入”事件是否被认为是一种不好的做法，因为它会给用户浏览器带来压力？@DougFir-没关系。它不应该给浏览器带来压力。@DougFir您的压力更小，因为在超过延迟之前，您在触发每个事件时所做的工作更少。感谢您的反馈，这非常有帮助