当有人停止输入1秒钟时触发功能

Question

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

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

我添加了一个'input'事件监听器,但我无法正确理解逻辑.

我想doStuff()如果它自上一次输入事件以来已经至少1秒钟.麻烦的是,当用户开始输入时,我的脚本正在触发,因为它基于"更改"事件监听器.

而且我认为必须有一种比我现在做的更合乎逻辑的方式.

另外我担心'输入'事件会影响用户浏览器,因为它在每次击键时运行,也许有更好的方法？

不情愿地在下面显示我的代码块,即使它没有多大意义并且是我较弱的脚本时刻之一,更多地表明我一直在尝试不同的事情.宁愿选择忽略我一直使用的疯狂逻辑的解决方案.

我希望doStuff(e)当用户"停止在输入中输入文本"时,这不是一个确切的定义.用户何时被认为已停止输入？现在我说1秒钟.

不想使用更改事件,因为它错过了许多用户不模糊的事件.

更喜欢纯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);

Answer 1

您可以使用input事件侦听器一起setTimeout()与clearTimeout()如下:

var timeoutID;

document.querySelector('#search_input').addEventListener('input', function(e) {
  clearTimeout(timeoutID);
  timeoutID = setTimeout(function() {
    alert("1 second has passed since any input was received.");
    // doStuff()
  }, 1000);
});

<input id="search_input">

该setTimeout()函数将在第一个参数中传递的函数排队,并在经过指定的毫秒数后执行.该clearTimeout()函数根据返回的id取消当前计划的超时setTimeout().

所以我上面显示的函数基本上表示每当input事件发生时,取消任何先前调度的超时,然后创建另一个.因此,内部函数中的代码将仅在用户停止键入后大约1秒运行.