jQuery 同时调用多个ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10150159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple ajax calls at same time
提问by krazy_joss
I have developed some websites and I always stumble a the same point: multiple ajax calls. I have a main page where all the content is loaded asynchronously. When the page is loaded, there are four INDEPENDENT calls that "draw" the page by areas (top, left, right and bottom) and while it is loaded I show to the user the typical ajax spins. So, when a request is received by the browser I execute the callback and the different areas are drawing at different time. The fact is that the answer for the server sometimes are mixed up, I mean, the answer of top is drawn in the left or vice-versa.
我开发了一些网站，但我总是遇到相同的问题：多个 ajax 调用。我有一个主页，其中所有内容都是异步加载的。当页面加载时，有四个 INDEPENDENT 调用按区域（顶部、左侧、右侧和底部）“绘制”页面，加载时我向用户显示典型的 ajax 旋转。因此，当浏览器收到请求时，我执行回调并且不同的区域在不同的时间绘制。事实是服务器的答案有时会混淆，我的意思是，顶部的答案绘制在左侧，反之亦然。
I've tried some solutions like creating a timestamp in each request to indicate to the browser and server that each request is different.
我尝试了一些解决方案，比如在每个请求中创建一个时间戳，以向浏览器和服务器表明每个请求都是不同的。
Also I've tried to configure some parameters of cache in the server, in case.
我也尝试在服务器中配置一些缓存参数，以防万一。
The only way in which works has been including the request2 in the callback of the one, etc.
唯一有效的方法是将 request2 包含在一个回调中，等等。
Anyone knows the proper way to do it or ever has beaten this issue?? I don't want to do chained request.
任何人都知道正确的方法或曾经解决过这个问题？我不想做链式请求。
Thanks
谢谢
Here is an example of what I mean:
这是我的意思的一个例子：
$(document).ready(function() {
$.get('/activity',Common.genSafeId(),function(data){$('#stream').html(data);$("#load_activity").addClass("empty");});
$.get('/messages',Common.genSafeId(),function(data){$('#message').html(data);$("#load_messages").addClass("empty");});
$.get('/deals',Common.genSafeId(),function(data){$('#new_deals_container').html(data);$("#load_deal").addClass("empty");});
$.get('/tasks',Common.genSafeId(),function(data){$('#task_frames').html(data);$("#load_task").addClass("empty");});});
And the html is a simple jsp with four container each one with a different id.
html 是一个简单的jsp，有四个容器，每个容器都有不同的id。
回答by Beetroot-Beetroot
CLOSURES
关闭
Closuresare a little mind-blowing at first. They are a feature of javaScript and several other modern computing languages.
关闭一开始有点令人兴奋。它们是 javaScript 和其他几种现代计算语言的一个特性。
A closure is formed by an executed instance of a function that has an inner function (typically an anonymous event handler or named method) that needs access to one or more outer variables (ie. variables that are within the outer function but outside the inner function). The mind-blowing thing is that the inner function retains access to the outer variables even though the outer function has completed and returned at the time that the inner function executes!
闭包由一个函数的执行实例形成，该函数具有需要访问一个或多个外部变量（即在外部函数内但在内部函数外部的变量）的内部函数（通常是匿名事件处理程序或命名方法） ）。令人兴奋的是，即使外部函数已经完成并在内部函数执行时返回，内部函数仍然保留对外部变量的访问！
Moreover, variables trapped by a closure are accessible onlyto inner functions and not to the further-out environment that brought the closure into being. This feature allows us, for example, to create class-like structures with private as well as public members even in the absence of language keywords "Public" and "Private".
此外，被闭包捕获的变量只能被内部函数访问，而不能被使闭包形成的更远的环境访问。例如，即使在没有语言关键字“公共”和“私有”的情况下，此功能也允许我们创建具有私有和公共成员的类结构。
Closures are made possible by inner functions' use of outer variables suppressing javaScript's "garbage collection" which would otherwise destroy the outer function's environment at some indeterminate point after completion.
通过内部函数使用外部变量抑制 javaScript 的“垃圾收集”，否则会在完成后的某个不确定点破坏外部函数的环境，从而使闭包成为可能。
The importance of closures to good, tidy javaScript programming cannot be overstressed.
闭包对于良好、整洁的 javaScript 编程的重要性怎么强调都不为过。
In the code below the function getData()forms, at each call, a closure trapping id1and id2(and url), which remain available to the anonymous ajax response handler ($.get's third argument).
在函数下面的代码中getData()，在每次调用时，都会有一个闭包捕获id1和id2（和url），它们仍然可用于匿名 ajax 响应处理程序（$.get 的第三个参数）。
$(document).ready(function() {
function getData(url, id1, id2) {
$.get(url, Common.genSafeId(), function(data) {
$(id1).html(data);
$(id2).addClass("empty");
});
}
getData('/activity', '#stream', '#load_activity');
getData('/messages', '#message', '#load_messages');
getData('/deals', '#new_deals_container', '#load_deal');
getData('/tasks', '#task_frames', '#load_task');
});
Thus, rather than writing four separate handlers, we exploit the language's ability to form closures and call the samefunction, getData(), four times. At each call, getData()forms a new closure which allows $.get's response handler (which is called asynchronously when the server responds) to address itsDOM elements.
因此，我们没有编写四个单独的处理程序，而是利用语言的能力来形成闭包并调用相同的函数getData()，四次。在每次调用时，getData()形成一个新的闭包，它允许 $.get 的响应处理程序（在服务器响应时异步调用）来寻址其DOM 元素。
回答by Robert Louis Murphy
Make sure you have different callbacks for each ajax call, it sounds like you are trying to use the same function for all four, thus when they are called out of order (because they take different amounts of time server-side), they are rendering in the wrong place. If you insist on using the same function for all your callbacks, then you have to put something in the payload so that the callback knows where to render to.
确保每个 ajax 调用都有不同的回调，这听起来像是你试图对所有四个使用相同的函数，因此当它们被无序调用时（因为它们在服务器端花费不同的时间），它们正在渲染在错误的地方。如果您坚持对所有回调使用相同的函数，那么您必须在有效负载中放入一些内容，以便回调知道渲染到哪里。
