如何在执行搜索之前让实时jQuery搜索等待一秒钟？

小编典典

如何在执行搜索之前让实时jQuery搜索等待一秒钟？

ajax

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

我的问题是，如果您输入的内容非常快，即使输入了另外10个字母，它也可能只搜索前1或2个字母。这引起一些问题。

我的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秒钟内没有按下任何键，请运行该功能，否则请稍等一下。

怎么做？

阅读 228

2020-07-26

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

2020-07-26