Javascript 如何使live jQuery搜索在执行搜索之前等待一秒钟？

我有一个搜索输入，当我键入时，它将数据从输入发送到php文件。php文件对我的数据库进行搜索，并显示搜索选项列表。你知道，ajax风格的实时搜索

我的问题是，如果你输入的东西真的很快，它可能只对前1或2个字母进行搜索，即使另外10个字母已经输入。这会引起一些问题

我的jQuery看起来有点像这样：

$(document).ready(function(){
  $('#searchMe').keyup(function(){
    lookup(this.value);
  });
});

及

所以我只是好奇，我怎么能让我的脚本在运行函数之前一直等到我输入完毕？我的逻辑是，如果某个键在200微秒内没有按下，请运行该功能，否则会保持一点

---

如何做到这一点？

1 psuedocode中的解决方案：

OnKeyPress()
    txt = getTxt
    sleep(200)
    newTxt = getTxt
    if (txt == newTxt)  // nothing has been typed so do something
       run my thing

---

您真的应该考虑使用jQuery插件。我发现这个插件非常有用，它已经满足了你的需要。特别关注延迟，您可以自定义延迟来更改插件在击键后等待运行的时间。

简单，使用。当然，您只希望一次运行一个计时器，因此在函数开始时使用它很重要

$(function() {
  var timer;
  $("#searchMe").keyup(function() {
    clearTimeout(timer);
    var ms = 200; // milliseconds
    var val = this.value;
    timer = setTimeout(function() {
      lookup(val);
    }, ms);
  });
});

---

我发现将事件附加到按键、向下键和向上键输入时最成功。Safari/FireFox/IE处理特殊按键（删除、退格等）的方式似乎有点不同，但将所有事件一起使用似乎可以解决这一问题。不过，运行所有事件的唯一方法是使用setTimeout，这样当所有事件都触发时，它只会重置计时器，最终回调只执行一次

var delay = 200;
var search_timer = null;
$("#searchMe").keydown(function(e) {
    if(search_timer) {
        clearTimeout(search_timer);
    }
    search_timer = setTimeout(lookup, delay);
});
$("#searchMe").keypress(function(e) {
    if(search_timer) {
        clearTimeout(search_timer);
    }
    search_timer = setTimeout(lookup, delay);
});
$("#searchMe").keyup(function(e) {
    if(search_timer) {
        clearTimeout(search_timer);
    }
    search_timer = setTimeout(lookup, delay);
});

这个人很高兴

 $(document).ready(function(){

   $("#searchMe").keyup(function () {

  try{window.clearTimeout(timeoutID);}catch(e){}
  timeoutID = window.setTimeout(run, 2000); //delay

  function run()
  {      //dowhatev
    var text = $("#searchMe").val();
    //$("#showit").html(text);       
  }     
 });   
});

---

您可能对我的jQuery迷你插件感兴趣。它：

• 允许您在启动请求之前指定延迟
• 自动取消以前计划发出的任何请求
• 自动取消您发出请求时正在进行的任何空中XHR请求
• 仅对最新请求调用回调
  • 如果用户键入“s”，等待请求发出的时间足够长，然后键入“a”，那么“s”的响应在“sa”的响应之前返回，您就不必处理它

使用

bindDelayed

对原始问题的回答如下：

// Wait 200ms before sending a request,
// avoiding, cancelling, or ignoring previous requests
$('#searchMe').bindDelayed('keyup',200,'/RPCsearch.php',function(){
  // Construct the data to send with the search each time
  return {queryString:this.value};
},function(html){
  // Use the response, secure in the knowledge that this is the right response
  $("#suggestions").html(html).show();
},'html','post');

如果我的站点已关闭，下面是用于堆栈溢出后代的插件代码：

(function($){
  // Instructions: http://phrogz.net/jquery-bind-delayed-get
  // Copyright:    Gavin Kistner, !@phrogz.net
  // License:      http://phrogz.net/js/_ReuseLicense.txt
  $.fn.bindDelayed = function(event,delay,url,dataCallback,callback,dataType,action){
    var xhr, timer, ct=0;
    return this.on(event,function(){
      clearTimeout(timer);
      if (xhr) xhr.abort();
      timer = setTimeout(function(){
        var id = ++ct;
        xhr = $.ajax({
          type:action||'get',
          url:url,
          data:dataCallback && dataCallback(),
          dataType:dataType||'json',
          success:function(data){
            xhr = null;
            if (id==ct) callback.call(this,data);
          }
        });
      },delay);
    });
  };
})(jQuery);

---

谢谢你，杰克。里面有一些我没见过的新东西！非常感谢。干杯，我会使用一个插件，我只是觉得这是一件很小的事情要做，我已经有一半的代码了，安装一个没有多大意义。无论如何，谢谢！++我可以改变你的头像吗？当我在任何地方看到你的答案时，我觉得这个网站与医学相关

：-）

。。！（那是因为你的白色衣服）这是一个很酷的迷你插件！感谢您撰写并分享@Phrogz！

(function($){
  // Instructions: http://phrogz.net/jquery-bind-delayed-get
  // Copyright:    Gavin Kistner, !@phrogz.net
  // License:      http://phrogz.net/js/_ReuseLicense.txt
  $.fn.bindDelayed = function(event,delay,url,dataCallback,callback,dataType,action){
    var xhr, timer, ct=0;
    return this.on(event,function(){
      clearTimeout(timer);
      if (xhr) xhr.abort();
      timer = setTimeout(function(){
        var id = ++ct;
        xhr = $.ajax({
          type:action||'get',
          url:url,
          data:dataCallback && dataCallback(),
          dataType:dataType||'json',
          success:function(data){
            xhr = null;
            if (id==ct) callback.call(this,data);
          }
        });
      },delay);
    });
  };
})(jQuery);