队列AJAX调用

Question

您好我正在做一个横向滚动网站，如： http ： //vanityclaire.com/

然而，在主页加载之后，我使用jQuery .load（）在家里的孩子们中，而不是拥有一个大的HTML文件。

目前我为每个div和ajax in the url位于标题中。 但是AJAX返回乱序，并且当我添加更多页面时，不要想用30多个http：//请求来对服务器进行操作。

我如何同步执行AJAX调用，即在请求之前等待第一个回复，或者甚至一次发送两个。

我一直在淘，也无法弄清楚我需要什么。

这是我的HTML：

<div id="mainLayout" class="fullwidth scrollArea">
    <div class="scrollItems">
      <div id="page-1" class="scrollItem" title="/">
        <div>HOME PAGE CONTENT</div>
      </div>
      <div id="page-2" class="scrollItem" title="/Page2.html">
        <div class="loading"> </div>
      </div>
      <div id="page-3" class="scrollItem" title="/Page3.html">
        <div class="loading"> </div>
      </div>

      <div id="page-4" class="scrollItem" title="/Page4.html">
        <div class="loading"> </div>
      </div>
      <div id="page-5" class="scrollItem" title="/Page5.html">
        <div class="loading"> </div>
      </div>
    </div>
  </div>

我的JS：

function s_loadingInitialPages() {
    var loadingItems = new Array();
    $(".scrollArea .scrollItem").each(function () {
        if ($(this).attr('title') != '/') {
            var oDelem = $(this);
            loadingItems.push(oDelem);
            //alert('test');
        }
    });

    for (i = 0; i < loadingItems.length; i++) {
        // title attribute is the URL to get
        var ajaxURL = loadingItems[i].attr("title") + '?ajaxPageContent=';
        $(loadingItems[i]).load(ajaxURL);

    }
}

是否有插件我可以继续向队列添加功能，让它处理它？

Answer 1

诀窍是使用回调。 你进行一次ajax调用，并在成功回调时创建下一个调用。

要做到这一点，只需将它们全部添加到队列中并在其周围放置一个包装器，逐个发送它们。

我几天前写了一篇。 我将在一秒钟内向您展示一个实现。

// Buffer class. Has a public append method that expects some kind of Task.
// Constructor expects a handler which is a method that takes a ajax task
// and a callback. Buffer expects the handler to deal with the ajax and run
// the callback when it's finished
function Buffer(handler) {
    var queue = [];

    function run() {
        var callback = function () {
             // when the handler says it's finished (i.e. runs the callback)
             // We check for more tasks in the queue and if there are any we run again
             if (queue.length > 0) {
                  run();
             }
        }
        // give the first item in the queue & the callback to the handler
        handler(queue.shift(), callback);
    } 

    // push the task to the queue. If the queue was empty before the task was pushed
    // we run the task.
    this.append = function(task) {
        queue.push(task);
        if (queue.length === 1) {
            run();
        }
    }

}

// small Task containing item & url & optional callback
function Task(item, url, callback) {
    this.item = item;
    this.url = url;
    this.callback = callback
}

// small handler that loads the task.url into the task.item and calls the callback 
// when its finished
function taskHandler(task, callback) {
    $(task.item).load(task.url, function() {
        // call an option callback from the task
        if (task.callback) task.callback();
        // call the buffer callback.
        callback();
    });
}

// create a buffer object with a taskhandler
var buffer = new Buffer(taskHandler);

for (i = 0; i < loadingItems.length; i++) {
    // title attribute is the URL to get
    var ajaxURL = loadingItems[i].attr("title") + '?ajaxPageContent=';
    buffer.append(new Task(loadingItems[i], ajaxURL));
}

为代码墙道歉。 只需实现自己的任务和处理程序。 只要处理程序在完成处理任务时调用第二个参数（回调），缓冲区就会起作用。

然后只需传递一个任务和一个处理程序。 处理程序执行ajax并在ajax返回时从缓冲区调用回调。

对于您的具体示例，如果您的加载需要很长时间，那么这将花费很长时间来加载所有30. ajax的目的是让服务器并行执行。

在您的情况下，一个更好的解决方案是发出30个请求然后捕获结果并确保您的ajax调用的结果仅按顺序附加到dom。 这涉及使用$ .ajax并以某种方式添加跟踪订单。

这样服务器就会尽可能快地完成它，一旦你得到它就可以按顺序服务它。 或者，如果你做的事情很快，那么在缓冲区中排队它们就没有任何惩罚。

Answer 2

大多数浏览器可以同时处理对单个域的6个或更多个ajax请求。
http://www.browserscope.org/?category=network&v=top

如果您的脚本一次发出30个ajax请求，前6个请求将很快完成。 之后，浏览器可能会开始分配长达5秒的任意等待时间。 Chrome是此行为的主要示例。

请求1-6在5毫秒内返回。

请求7-12在5,005毫秒内返回。

请求11-18在10,005毫秒内返回。

请求19-24在15,005毫秒内返回。

请求25-30在20,005毫秒内返回。

我建议构建一个函数回调队列来处理所有应用程序的ajax请求，并且一次处理不超过6个。

 var ajaxCownt = (ajaxCownt == null ? 0 : ajaxCownt); // Make limit globally accessible. var ajaxKue = (ajaxKue == null ? [] : ajaxKue); // Make queue globally accessible. function doMyAjaxRequest() { console.log("doing ajax request."); // Implement ajax request, here. } for (var i = 1;i <= 30;i++) { ajaxKue.push( function() { doMyAjaxRequest() } ); // Add request to queue. } while (ajaxCownt != null && ajaxCownt < 6 && ajaxKue != null && ajaxKue.length && ajaxKue.length > 0) { ajaxCownt++; console.log("incrementing pending ajax requests counter by 1."); ajaxKue.shift().call(); }; // Register an event to detect when an ajax request completes. // Allow for an additional ajax request to be processed. $( document ).ajaxComplete(function() { if (ajaxCownt && ajaxCownt > 0) { ajaxCownt--; console.log("decrementing pending ajax requests counter by 1."); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>