Question

假设我正在做3个ajax调用，我想在做某事之前等待3个调用完成。

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

例：

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

Answer 1

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

Documentation

Answer 2

你可以使用jquery deferred object

这是一篇有用的帖子http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Answer 3

其他答案中提到的.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
    });
}

Answer 4

这里有一个[库] [1]基于jQuery为此目的。

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

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

用于同步事件的JavaScript库

4 个答案: