如何延迟 .keyup（） 处理程序直到用户停止键入？

我将这个小函数用于相同的目的，在用户停止键入指定的时间量或在以高速率触发的事件中执行函数，例如：resize

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

它是如何工作的：

该函数将返回一个在内部处理单个计时器的包装函数，在每次执行中，计时器将以提供的时间延迟重新启动，如果在此时间过去之前发生多次执行，则计时器将重置并重新启动。delay

当计时器最终结束时，执行回调函数，传递原始上下文和参数（在此示例中，jQuery 的事件对象和 DOM 元素作为 ）。this

更新 2019-05-16

我已经使用ES5和ES6功能重新实现了现代环境的功能：

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

该实现由一组测试覆盖。

对于更复杂的东西，请看一下jQuery Typewatch插件。

如果要在类型完成后进行搜索，请使用全局变量来保存从调用返回的超时，并使用“如果尚未发生”将其取消，以便它不会触发超时，除非在最后一个事件上setTimoutclearTimeoutkeyup

var globalTimeout = null;  
$('#id').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
}   
function SearchFunc(){  
  globalTimeout = null;  
  //ajax code
}

或者使用匿名函数：

var globalTimeout = null;  
$('#id').keyup(function() {
  if (globalTimeout != null) {
    clearTimeout(globalTimeout);
  }
  globalTimeout = setTimeout(function() {
    globalTimeout = null;  

    //ajax code

  }, 200);  
}