JavaScript库用于同步事件

Question

假设我正在进行3个ajax调用，并且我希望在执行某些操作之前等待这3个调用完成。

是否有一个库可以在JavaScript中同步多个异步事件？（使用或不使用jQuery的事件系统）

Ex.:

var sync = new syncLib();
$('a1').click(sync.newListener());
$('a2').click(sync.newListener());

sync.wait(function(e1, e2) {
  // fired when both a1 and a2 are clicked or when 10 seconds have passed
  // e1 and e2 would have properties to know whether or not they timed out or not..
}, 10 /* timeout */));

我找到了这个：https://github.com/Ovea/js-sync/blob/master/README.md，但不支持超时。 （假设第二个ajax调用时间太长，我不想让我的同步停滞不前，我想设置10秒的超时时间）

我知道我可以自己编写代码，但我只是在这里检查（在搜索后）。

谢谢！

编辑： 从那以后我找到了async：https://github.com/caolan/async

- Mike Gleason jr Couturier

Answer 1

$.when($.ajax("/"), $.ajax("/"), $.ajax("/")).then(function () {
    alert("all 3 requests complete");
});

文档

- Esailija

Answer 2

你可以使用jQuery的延迟对象。

这是一篇有用的文章http://www.erichynds.com/jquery/using-deferreds-in-jquery/。

- Rafay

---

+1 很完整，但我会接受 Esailija 的答案，因为他先回答了 ;) - Mike Gleason jr Couturier

Answer 3

这里有一个基于jQuery的[库][1]，专门为此目的而制作。

在简单的用例中，$.when()是最好的选择，但jcon-q-rency允许您同步任何异步代码部分。

http://www.megiddo.ch/jcon-q-rency

- MaParole

Answer 4

其他答案中提到的.deferred、.when、.then解决方案更加优雅，但也可以编写自己的简单解决方案，以便了解如何手动完成此操作。只需设置一个计数器来记录正在进行的 ajax 调用数量，在每个 ajax 调用的成功处理程序中，将计数器减少并在计数器达到零时触发您的操作。

function DoMyAjaxCalls(callbackWhenDone) {
    var numAjaxCalls = 3;

    // set timeout so we don't wait more than 10 seconds to fire the callback
    // even if ajax calls aren't done yet
    var timer = setTimeout(callbackWhenDone, 10*1000);

    function checkAjaxDone() {
        --numAjaxCalls;
        if (numAjaxCalls == 0) {
            clearTimeout(timer);
            callbackWhenDone();
        }
    }

    // first ajax call
    $.ajax({
        url: 'ajax/test1.html',
        success: function(data) {
            // write code to handle the success function
            checkAjaxDone();
        },
        error: checkAjaxDone
    });

    // second ajax call
    $.ajax({
        url: 'ajax/test2.html',
        success: function(data) {
            // write code to handle the success function
            checkAjaxDone();
        },
        error: checkAjaxDone
    });

    // third ajax call
    $.ajax({
        url: 'ajax/test3.html',
        success: function(data) {
            // write code to handle the success function
            checkAjaxDone();
        },
        error: checkAjaxDone
    });
}

- jfriend00