Question

我有四个功能。他们每个人都在工作。

$.ajax({
         url: sectoresURL,
         context: document.body,
         timeout: 10000 // 1000 MS = 10 Seconds
       }).done(function(jsonSectores) {
           // Blablabla...
       });

但是当我必须在屏幕上显示它们时，最后一个功能首先显示的是第一个功能......（是的，这是正确的，因为它花费的时间更少）。

例如：

Get Http://... 200 ms
Get Http://... 150 ms
Get Http://... 100 ms
Get Http://... 50 ms

那么，如何处理呢？我想在screem上显示第一个函数，然后是第二个函数，......等等。

Answer 1

jQuery的延迟本质上是一种承诺。利用这个事实。

您希望尽早执行所有ajax方法，以便向用户引入最少的延迟：

var p1, p2, p3, p4;
p1 = $.ajax(...);
p2 = $.ajax(...);
p3 = $.ajax(...);
p4 = $.ajax(...);

但是你还需要他们的回调才能等到之前的ajax请求也完成了。

您可以使用$.when执行此操作：

var p1Done, p2Done, p3Done, p4Done;
p1Done = p1.then(function (p1Resolution) {...});
p2Done = $.when(p1Done, p2).then(function (p1Resolution, p2Resolution) {...});
p3Done = $.when(p2Done, p3).then(function (p2Resolution, p3Resolution) {...});
p4Done = $.when(p3Done, p4).then(function (p3Resolution, p4Resolution) {...});

提醒：

如果以这种方式构造代码，并且任何承诺被拒绝，请确保适当地处理失败状态。所需要的只是网络延迟时间超过请求超时和整个承诺链失败。

Answer 2

考虑使用$.when()。

根据documentation，当接受许多承诺并返回类似承诺的对象时。传递给.then()的成功回调将通过传递给.when()的承诺的值进行调用。

为了完整起见，我说$.when()返回一个类似承诺的对象，因为成功处理程序为提供给$.when()的每个承诺都带有一个参数。真正的承诺以单一价值解决。

无论如何，这是一个例子：

$.when(
 $.ajax({
  url: url,
  context: document.body,
  timeout: 10000
 }),
 $.ajax({
  url: url,
  context: document.body,
  timeout: 10000
 })
).then(
 function (first, second) {
  console.log("The first result is: " + first[0]);
  console.log("The second result is: " + second[0]);
 },
 function(e) {
  console.log("Something happened: " + e);
 }
);

这种方法比链接更受欢迎，因为AJAX请求将并行运行。

Answer 3

按照你想要的顺序创建依赖的ajax调用

$.ajax({
        url: sectoresURL, //First Call
        context: document.body,
        success: function(data){
            $.ajax({
                url: "example/",// Second call
                data: 'page='+a,
                success: function(data){
                      //Call your 3rd function if you want and so on
               });
});

我如何在jQuery.Ajax（DataType：JSON）中处理时间响应？

3 个答案: