如何延迟.keyup()处理程序，直到用户停止输入?

我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“Windows”，它会用AJAX搜索每个键:“W”，“Wi”，“Win”，“Wind”，“Windo”，“Window”，“Windows”。

我想有一个延迟，所以它只在用户停止输入200毫秒时搜索。

在keyup函数中没有这个选项，我尝试了setTimeout，但它不起作用。

我该怎么做呢?

当前回答

我很惊讶，没有人提到多重输入的问题在CMS的非常好的剪辑。

基本上，你必须为每个输入分别定义延迟变量。否则，如果有人把文本放在第一个输入，并迅速跳转到其他输入并开始输入，第一个的回调将不会被调用!

下面是我根据其他答案编写的代码:

(function($) {
    /**
     * KeyUp with delay event setup
     * 
     * @link http://stackoverflow.com/questions/1909441/jquery-keyup-delay#answer-12581187
     * @param function callback
     * @param int ms
     */
    $.fn.delayKeyup = function(callback, ms){
            $(this).keyup(function( event ){
                var srcEl = event.currentTarget;
                if( srcEl.delayTimer )
                    clearTimeout (srcEl.delayTimer );
                srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms);
            });

        return $(this);
    };
})(jQuery);

该解决方案将setTimeout引用保留在输入的delayTimer变量中。它还像fazzyx建议的那样将元素的引用传递给回调。

在IE6, 8(comp - 7)， 8和Opera 12.11中测试。

2012-12-17 12:17:13

其他回答

延迟函数调用每个按键。 jQuery 1.7.1或更高版本

jQuery.fn.keyupDelay = function( cb, delay ){
  if(delay == null){
    delay = 400;
  }
  var timer = 0;
  return $(this).on('keyup',function(){
    clearTimeout(timer);
    timer = setTimeout( cb , delay );
  });
}

用法:$ (' # searchBox”)。keyupDelay(cb);

2012-06-29 11:42:48

Use

mytimeout = setTimeout( expression, timeout );

其中expression是要运行的脚本，timeout是在它运行之前等待的时间(以毫秒为单位)——这不会暂停脚本，而是简单地延迟该部分的执行，直到超时完成。

clearTimeout(mytimeout);

将重置/清除超时，这样它就不会在表达式中运行脚本(就像取消)，只要它还没有被执行。

2009-12-15 18:44:15

// Get an global variable isApiCallingInProgress

//  check isApiCallingInProgress 
if (!isApiCallingInProgress) {
// set it to isApiCallingInProgress true
      isApiCallingInProgress = true;

      // set timeout
      setTimeout(() => {
         // Api call will go here

        // then set variable again as false
        isApiCallingInProgress = false;     
      }, 1000);
}

2019-11-28 09:47:08

使用标签延迟多函数调用

这是我的解决方案。它会延迟你想要的任何函数的执行。它可以是按下键搜索查询，也可以是快速单击上一个或下一个按钮(否则如果连续快速单击将发送多个请求，并且最终不会使用)。它使用一个全局对象存储每次执行时间，并将其与最新的请求进行比较。

因此，结果是只有最后一个点击/动作将被实际调用，因为这些请求存储在队列中，如果队列中没有其他具有相同标签的请求，则在X毫秒后调用!

function delay_method(label,callback,time){
    if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
    delayed_methods[label]=Date.now();
    var t=delayed_methods[label];
    setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  delayed_methods[label]=""; callback();}}, time||500);
  }

您可以设置自己的延迟时间(可选，默认为500ms)。并以“闭包方式”发送函数参数。

例如，如果你想调用下面的函数:

function send_ajax(id){console.log(id);}

为了防止多个send_ajax请求，可以使用以下方法延迟它们:

Delay_method ("check date"， function(){send_ajax(2);}, 600);

每个使用标签“check date”的请求只有在600毫秒的时间范围内没有其他请求时才会被触发。这个参数是可选的

标签独立性(调用相同的目标函数)，但同时运行:

delay_method("check date parallel", function(){send_ajax(2);});
delay_method("check date", function(){send_ajax(2);});

导致调用相同的函数，但由于它们的标签不同而单独延迟它们

2015-05-28 10:25:12