Question

我有一个搜索文本框，在按键时按下AJAX调用以返回输入文本的搜索结果。这导致每个按键都进行一次AJAX调用。

例如，如果我输入airport：

我得到7个ajax请求，每个请求分别搜索a，ai，air，airp，airpo，airpor，airport - 但问题是他们可能都是一个接一个地开始但不一定以相同的顺序结束所以通常情况下，我收到错误顺序的结果，即我可能已经写了airport并收到了airport的结果，只是为了稍后收到airpo的结果。

我如何在jQuery中处理这个？

更新

定时器延迟为3秒 - 但问题在于确保在发出一个AJAX请求时，另一个请求在取消之前的请求时等等。

我怎么能在代码中这样做？

Answer 1

延迟启动ajax调用 - 将其与上面的abort()代码结合使用：

var typeDelay = function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    }  
}();

$("#searchField").keypress(function(){
    typeDelay(function(){
        // your ajax search here, with a 300 ms delay...
    }, 300);
});

Answer 2

每次按键发送一个查找请求通常都是一个坏主意 - 我建议您以较短的间隔发送（即每隔3秒左右发送一次文本框值）。

此外，为了防止异步返回，您可以使用一个标志来跟踪请求的状态，这样一次只能激活1个（例如，设置发送，返回时清除）。这将有效地使您的查找同步。

编辑：添加了示例代码

var req = null;

function sendRequest (text)
{
    // Check for pending request & cancel it
    if (req) req.abort ();

    req = $.ajax ({
        // various options..
        success: function (data)
        {
            // Process data
            ...
            // reset request
            req = null;
        }
    });
}

Answer 3

您可以取消AJAX请求：

var x = $.ajax({
    ...
});

x.abort()

因此，如果您想在上一个请求返回之前发送新请求，请中止（）第一个请求。

Answer 4

建立＆＃34; ajax队列＆＃34;在jquery中...使用它来确保您的请求按顺序排列。以下地址在底部附近有一个很好的例子：

AJAX Streamlining techniques?
扩展这些队列的功能，以处理延迟和中止机制，如上面的答案。

如果在延迟结束之前向队列提交了另一个请求，则中止排队的请求。

建议：将延迟和中止机制的功能正确添加到队列中，以便在向队列发送请求时可以请求值，例如params，这样您的队列插件可以在此需求之外保持可重用。

处理连续的Ajax请求 - JQUERY

4 个答案: