javascript - 如何让我的实时 jQuery 搜索在执行搜索之前稍等一下？

Question

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

我的问题是，如果您输入的速度非常快，它可能只会搜索前 1 个或 2 个字母，即使已经输入了另外 10 个字母。这会导致一些问题。

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

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

和

function lookup(searchinput) {

  if(searchinput.length == 0) {
    // Hide the suggestion box.
    $("#suggestions").hide();
  } else {

    $('#loading').fadeIn();

    $.post("/RPCsearch.php", {queryString: ""+searchinput+""}, function(data){
      if(data.length > 0) {
        $("#suggestions").html(data).show();
        $('#loading').fadeOut();
      }
    });
  }
} // lookup

所以我只是好奇，如何才能让我的脚本等到我完成输入后再运行该函数？我的逻辑是这样的:如果 200 微秒内没有按下某个键，则运行该函数，否则稍等一下。

这是如何完成的？

Answer 1

简单，使用setTimeout 。当然，您只想同时运行一个计时器，因此使用 clearTimeout 很重要在函数的开头...

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