Question

我使用jQuery.ajax（）方法构建了一个livesearch。在每个keyup事件中，它从服务器接收新的结果数据。

问题是，当我输入速度非常快时，例如“foobar”和“fooba”的GET请求比“foobar”请求需要更多的时间，显示“fooba”的结果。

我认为用超时参数处理这个是不可能的。

有谁知道如何解决这个问题？

Answer 1

您可以在开始新请求时存储和.abort()最后一个请求，如下所示：

var curSearch;
$("#myInput").keyup(function() {
  if(curSearch) curSearch.abort(); //cancel previous search
  curSearch = $.ajax({ ...ajax options... }); //start a new one, save a reference
});

$.ajax()方法返回XmlHttpRequest对象，因此只需挂起它，当您开始下一次搜索时，中止前一个搜索。

Answer 2

为每个请求分配唯一的递增ID，并仅以递增顺序显示它们。像这样：

var counter = 0, lastCounter = 0;
function doAjax() {
  ++counter;
  jQuery.ajax(url, function (result) {
    if (counter < lastCounter)
      return;
    lastCounter = counter;
    processResult(result);
  });
}

Answer 3

您应该只在用户暂时没有输入任何内容（500毫秒左右）时开始搜索。这可以防止你遇到的问题。

一个优秀的jQuery插件就是 delayedObserver ：

http://code.google.com/p/jquery-utils/wiki/DelayedObserver

Answer 4

这样做可以取消最后一个。这可能是太多的取消，但当打字慢时，它会触发。

Answer 5

对于每个KeyUp事件发送ajax请求似乎是一个大量的流量。您应该等待用户停止输入 - 可能是他们已经完成了，至少持续了几百毫秒。

我要做的是：

var ajaxTimeout;

function doAjax() {
     //Your actual ajax request code
}


function keyUpHandler() {
    if (ajaxTimeout !== undefined) 
        clearTimeout(ajaxTimeout);

    ajaxTimeout = setTimeout(doAjax, 200);
}

您可能必须使用实际的超时时间，但这种方式非常有效，并且不需要任何其他插件。

编辑：如果需要传入参数，请创建内联函数（闭包）。

...
var fun = function() { doAjax(params...) };
ajaxTimeout = setTimeout(fun, 200);

Answer 6

您需要某种类型的ajax队列，例如：

http://plugins.jquery.com/project/ajaxqueue

或http://www.protofunc.com/scripts/jquery/ajaxManager/

编辑：另一种选择，研究自动完成插件代码并模拟它。（有几个自动完成以及jquery UI中的一个或者只是实现自动填充，如果它满足您的需求

jQuery.ajax（）：丢弃慢速请求

6 个答案: