队列AJAX调用
您好我正在做一个横向滚动网站，如： http ： //vanityclaire.com/
然而，在主页加载之后，我使用jQuery .load（）在家里的孩子们中，而不是拥有一个大的HTML文件。
目前我为每个div和ajax in the url位于标题中。 但是AJAX返回乱序，并且当我添加更多页面时，并不喜欢用30多个http：//请求来破坏服务器。
我如何同步执行AJAX调用，即在请求之前等待第一个回复，或者甚至一次发送两个。
我一直在淘，也无法弄清楚我需要什么。
这是我的HTML：
HOME PAGE CONTENT 我的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); } }
是否有插件我可以继续向队列添加function，让它处理它？
诀窍是使用回调。 你进行一次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 (ie 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并以某种方式添加跟踪订单。
这样服务器就会尽可能快地完成它，一旦你得到它就可以按顺序服务它。 或者，如果你做的事情很快，那么在缓冲区中排队它们就没有任何惩罚。
大多数浏览器可以同时处理对单个域的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."); } });