处理连续的Ajax请求 - JQUERY

Question

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

例如，如果我输入airport ：

我得到7个ajax请求，每个请求分别搜索a，ai，air，airp，airpo，airpor，机场 - 但是问题是它们可能都是一个接一个地开始但不一定以相同的顺序结束我没有收到错误订单的结果，即我可能已经写了airport并收到了airport的结果， airpo稍后收到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

1. 在jquery中构建一个“ajax队列”......用它来确保你的请求按顺序排列。 以下地址靠近底部有一个很好的例子：

   AJAX精简技术？

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

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

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