javascript - Ajax 脚本在打字时无法正常工作(keyup)

Question

我有一个用于搜索的输入。用户开始键入，在键入时，与键入的字符串相关的许多结果显示在表格中。

我的 HTML:

<input type="text" id="searchinput" onkeyup="Search()" placeholder="Search...">

我的Javascript函数:

function Search() {
  var value = $("#searchinput").val().toLowerCase().trim();
  if (value == '') {
    $("div#results").html('');
  } else {
    $.ajax({
      type: 'post',
      url: 'getresults.php',
      data: {
        values: value
      },
      success: function(response) {
        $("div#results").html(response);
      }
    });
  }
}

如果用户快速输入搜索词，那么用户就会得到所需的结果。如果你打字速度很慢，那么它会得到结果，几秒钟后，它就像中断并显示其他结果(可能是之前按下的键？)。

有什么想法吗？

Answer 1

您可以尝试进行去抖，这只会在 250 毫秒不活动后触发请求。

$.debounce(250, function(e) {
    console.log("It works!");
})

这是我引用的去抖动函数
http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js