如何将.keyup()处理程序推迟到用户停止键入？

Question

如何将.keyup()处理程序推迟到用户停止键入？我有一个搜索区域。现在它会搜索每一个按键。因此，如果有人键入“Windows”，它将使用Ajax搜索每一个键：“W”、“Wi”、“Win”、“Wind”、“Windo”、“Window”、“Windows”。我希望有一个延迟，所以它只搜索当用户停止输入200毫秒。中没有此选项。keyup我试过了setTimeout但没有用。我怎么能这么做？

Answer 1

如果要在类型完成后搜索，请使用全局变量来保存从setTimout调用并取消它clearTimeout如果它还没有发生，那么它就不会触发超时，除非在最后一次keyup事件

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);  }

Answer 2

另一个轻微的增强CMS的答案。要方便地允许单独的延迟，可以使用以下方法：

function makeDelay(ms) {
    var timer = 0;
    return function(callback){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };};

如果您想重用相同的延迟，只需执行

var delay = makeDelay(250);$(selector1).on('keyup', function() {delay(someCallback);});
$(selector2).on('keyup', function() {delay(someCallback);});

如果你想要单独的延迟，你可以

$(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
$(selector2).on('keyup', function() {makeDelay(250)(someCallback);});