优雅的 javascript - 在发生 3 个不同的 AJAX 请求时触发函数

Posted 2023-02-19

【中文标题】优雅的 javascript - 在发生 3 个不同的 AJAX 请求时触发函数

【英文标题】：Elegant javascript - making function fire when 3 different AJAX requests have happened

【发布时间】：2011-11-13 20:59:58

【问题描述】：

我有三个不同的 AJAX 查询，我想访问各种服务。当他们都回来（或超时）时，我希望他们调用一个函数。

我可以想象很多方法可以做到这一点，比如当所有请求都进来时计算一个中间函数，但是有没有一个很好的解决方案？

【问题讨论】：

你在使用任何 JS 库吗？你有什么理由没有accepted answers to your solved questions？

你也许可以使用 jquerys queue 函数来做这样的事情。顺便说一句，您可能应该接受某些问题的答案（假设它们是可以接受的），因为那时人们会更愿意提供帮助。

【参考方案1】：

jQuery 允许你做你想做的事。见

http://www.erichynds.com/jquery/using-deferreds-in-jquery/

当然，这仅在您使用 jQuery 或可以使用 jQuery 时才有效。

【讨论】：

附录：此外，jQuery。但说真的，延迟/承诺的概念绝对是您想要优雅地做到这一点的东西。

这确实是我想要的。此外，还没有遇到过 when 和 then 功能。非常有趣，谢谢大家。

【参考方案2】：

如果您使用的是 jQuery 1.5 或更高版本，则可以使用jQuery.when 方法。例如：

$.when($.ajax("/page1.php"),
       $.ajax("/page2.php")).done(function(a1,  a2) 
           /* a1 and a2 are arguments resolved for the 
              page1 and page2 ajax requests, respectively */
           var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
           if ( /Whip It/.test(jqXHR.responseText) ) 
               alert("First page has 'Whip It' somewhere.");
           
);

否则，请参阅Promises/A design pattern。

【参考方案3】：

您可以使用 jQuery 使用完整的回调轻松完成此操作

var checked = 0;

$(function() 
    $.ajax( url: "1st ajax", complete: function() checked++; Check(); );
    $.ajax( url: "2nd ajax", complete: function() checked++; Check(); );
    $.ajax( url: "3rd ajax", complete: function() checked++; Check(); );


function Check() 
    if (checked >= 3) 
        // all 3 have been successfully completed or timedout
    

或者使用then() deferred object依次调用：

$.get("1st ajax").then(function() 
    $.get("2nd ajax").then(function() 
        $.get("3rd ajax").then(function() 
            // call something
        );
    );
);

或使用then() deferred object 调用它们而无需等待Check() 方法：

$.get("1st ajax").then(function() checked++; Check(); );
$.get("2nd ajax").then(function() checked++; Check(); );
$.get("3rd ajax").then(function() checked++; Check(); );

【参考方案4】：

嗯，也许你可以在最后一个调用的函数完全执行后将布尔值设置为 true？不过，我想如果函数是异步执行的，这会带来问题。