在 JavaScript 中同步两个异步事件答案

【问题标题】：Sync two async events in JavaScript在 JavaScript 中同步两个异步事件
【发布时间】：2013-06-26 14:31:07
【问题描述】：

在我的 Javascript 应用程序 (jQuery) 中，我有两个异步触发的事件

小部件 1 在完成加载时触发“Event1”
小部件 2 在完成加载时触发“Event2”

如何“同步”这两个异步事件，以便仅在这两个事件触发后“调用方法”。

我需要一种也适用于多个事件的方法。

【问题讨论】：

使用回调函数？

标签： javascript jquery events javascript-events

【解决方案1】：

使用延迟对象。

var deferredObj1 = $.Deferred(),
    deferredObj2 = $.Deferred();

$.when(deferredObj1,deferredObj2).done(function(){
    console.log("They are both done!");
});

// inside the Event1 handler:
deferredObj1.resolve();

// inside the Event2 handler:
deferredObj2.resolve();

【讨论】：

+1 打败了我，只是提醒自己这是如何工作的。只需添加截至 Jquery 1.5 ajax 调用实现 Promise 接口，假设有问题的异步事件是 ajax 这应该正是您所追求的......

【解决方案2】：

您可能想查看async.js，它提供了一种非常有趣且简洁的方式来同步异步操作的执行。

例如，waterfall 方法允许您按顺序链接异步操作。

这样的执行在您的实际代码中看起来既漂亮又简单：

async.waterfall([
    function(callback){
        callback(null, 'one', 'two');
    },
    function(arg1, arg2, callback){
        callback(null, 'three');
    },
    function(arg1, callback){
        // arg1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
   // result now equals 'done'    
});

【讨论】：

瀑布看起来真的像 jquery $.when 或者我误解了它的目的
这实际上链接了调用，以便第二个在第一个之后运行，第三个在第二个之后运行，依此类推。这可能是可取的，也可能不是可取的，具体取决于具体情况。原始代码同时启动了两个任务，并且能够以任意顺序运行。
@cHao 当然，在这种情况下，如果您希望您的操作并行运行，没有什么可以阻止您使用 async.parrallel。