Jquery ajax 搜索去抖动答案

【问题标题】：Jquery ajax search debounceJquery ajax 搜索去抖动
【发布时间】：2013-09-24 16:17:48
【问题描述】：

我正在为一个网站构建实时搜索，该网站将根据用户键入的内容返回结果。我只希望在用户完成输入后发送请求。

我已经尝试了一些使用计时器的实现，甚至是 underscore.js 中的 debounce 方法，但我似乎总是得到类似的结果。

在我输入时，请求会延迟到我完成输入。但随后它似乎会触发所有输入，就好像它们已排队一样。例如，如果我输入“自行车”，结果会返回如下：

b

bi

bik

bikes

因此，您会获得搜索结果流。

这是我目前使用下划线 js 的实现

$('#search_term').on('keyup', _.debounce(function (e) {

       $.ajax({
            type: "GET",
             url: "quicksearch.php",
            data: { search_term:$('#search_term').val()},
            success: function(msg){
              $('#quick_search_results').html(msg).slideDown();
            }
    });

}, 100));

有人有什么想法吗？

【问题讨论】：

您的实现是正确的，您能否确认它在控制台网络选项卡上触发了多个请求检查？此外，100 毫秒的值可能太低了

标签： jquery ajax livesearch

【解决方案1】：

也许您的用户打字速度不够快。将_.debounce 函数的wait 参数设置为比示例中的100ms 长：（请参阅规范：_.debounce(function, wait, [immediate])。

$('#search_term').on('keyup', _.debounce(function (e) {
   $.ajax({
        type: "GET",
        url: "quicksearch.php",
        data: { search_term:$('#search_term').val()},
        success: function(msg){$('#quick_search_results').html(msg).slideDown();}
   });
}, 300)); // < try 300 rather than 100

【讨论】：

增加超时似乎有所帮助。在这里发布之前我没有检查控制台，这次请求只发送一次，与我尝试过的其他示例一样，有多个请求。谢谢。

【解决方案2】：

您可以通过设置 setTimeout 来做到这一点，以便在经过特定时间后对输入上发生的每个更改进行 ajax 调用，但不要忘记终止之前的调用。

var debounce;
$('#input').on('input', function (e) {
    clearTimeout(debounce);
    debounce = setTimeout( 
      function () { 
        searchText(e.target.value) 
      }, 1000
    );
});

【讨论】：