问题 处理相互依赖和/或分层的异步调用

活动

也许使用事件是一个好主意。它可以防止您创建代码树并解除代码分离。

我用过 豆 作为事件的框架。

示例伪代码：

// async request for files
function fetchFiles(source) {

    IO.get(..., function (data, status) {
        if(data) {
            bean.fire(window, 'fetched_files', data);
        } else {
            bean.fire(window, 'fetched_files_fail', data, status);
        } 
    });

}

// handler for when we get data
function onFetchedFiles (event, files) {
    for (file in files) { 
        var data = loadFile(file);

        if (!data) {
            display('failed to load: ' + file);
        } else {
            display(data);
        }
    }
}

// handler for failures
function onFetchedFilesFail (event, status) {
    display('Failed to fetch list. Reason: ' + status);
}

// subscribe the window to these events
bean.on(window, 'fetched_files', onFetchedFiles);
bean.on(window, 'fetched_files_fail', onFetchedFilesFail);

fetchFiles();

自定义事件和这种事件处理几乎在所有流行的JS框架中实现。

听起来像你需要的 jQuery延期。以下是一些未经测试的代码，可能有助于您指明正确的方向：

$.when(fetchFiles(source)).then(function(file_list) { 
  if (!file_list) {
    display('failed to fetch list');
  } else {
    for (file in file_list) {
      $.when(loadFile(file)).then(function(data){
        if (!data) {
          display('failed to load: ' + file);
        } else {
          display(data);
        }
      });
    }
  }
});

我还发现了另一个 体面的职位 它给出了Deferred对象的一些用例

如果您不想使用jQuery，那么您可以使用的是Web worker和同步请求。除了10之前的任何Internet Explorer版本之外，每个主要浏览器都支持Web worker。

Web Worker浏览器兼容性

基本上，如果您不完全确定Web工作者是什么，请将其视为浏览器在单独的线程上执行专用JavaScript而不影响主线程的一种方式（警告：在单核CPU上，两个线程都将以交替方式运行。幸运的是，现在大多数计算机都配备了双核CPU）。通常，Web工作者保留用于复杂计算或一些密集处理任务。请记住，Web worker中的任何代码都不能引用DOM，也不能引用任何尚未传递给它的全局数据结构。从本质上讲，Web工作者独立于主线程运行。工作者执行的任何代码都应与其自己的JS代码库中的其余JavaScript代码库分开。此外，如果Web工作人员需要特定数据才能正常工作，则需要在启动时将这些数据传递给他们。

另一个值得注意的重要事项是，您需要用于加载文件的任何JS库都需要直接复制到工作程序将执行的JavaScript文件中。这意味着应首先缩小这些库（如果它们还没有），然后复制并粘贴到文件的顶部。

无论如何，我决定写一个基本模板来向你展示如何处理这个问题。请在下面查看。随意提问/批评/等。

在要在主线程上继续执行的JS文件中，您需要类似下面的代码来调用worker。

function startWorker(dataObj)
{
    var message = {},
        worker;

      try
      {
        worker = new Worker('workers/getFileData.js');
      } 
      catch(error) 
      {
        // Throw error
      }

    message.data = dataObj;

    // all data is communicated to the worker in JSON format
    message = JSON.stringify(message);

    // This is the function that will handle all data returned by the worker
    worker.onMessage = function(e)
    {
        display(JSON.parse(e.data));
    }

    worker.postMessage(message);
}

然后，在一个单独的工作文件中（正如您在上面的代码中看到的那样，我命名了我的文件 getFileData.js），写下面的内容......

function fetchFiles(source)
{
    // Put your code here
    // Keep in mind that any requests made should be synchronous as this should not
    // impact the main thread
}

function loadFile(file)
{
    // Put your code here
    // Keep in mind that any requests made should be synchronous as this should not
    // impact the main thread
}

onmessage = function(e)
{
    var response = [],
        data = JSON.parse(e.data),
        file_list = fetchFiles(data.source),
        file, fileData;

    if (!file_list) 
    {
        response.push('failed to fetch list');
    }
    else 
    {
        for (file in file_list) 
        { // iteration, not enumeration
            fileData = loadFile(file);

            if (!fileData) 
            {
                response.push('failed to load: ' + file);
            } 
            else 
            {
                response.push(fileData);
            }
        }
    }

    response = JSON.stringify(response);

    postMessage(response);

    close();
}

PS：另外，我挖出了另一个线程，它可以更好地帮助您理解与Web worker一起使用同步请求的优缺点。

堆栈溢出 - Web工作者和同步请求

异步 是一个常用的异步流控制库，通常与node.js一起使用。我从来没有亲自在浏览器中使用它，但显然它也适用于那里。

这个例子（理论上）将运行你的两个函数，返回所有文件名的对象及其加载状态。 async.map 并行运行，而 waterfall 是一个系列，将每一步的结果传递给下一步。

我假设你的两个异步函数接受回调。如果他们不这样做，我需要更多关于如何使用它们的信息（他们是否在完成时发射事件等等）。

async.waterfall([
  function (done) {
    fetchFiles(source, function(list) {
      if (!list) done('failed to fetch file list');
      else done(null, list);
    });
    // alternatively you could simply fetchFiles(source, done) here, and handle
    // the null result in the next function.
  },

  function (file_list, done) {
    var loadHandler = function (memo, file, cb) {
      loadFile(file, function(data) {
        if (!data) {
          display('failed to load: ' + file);
        } else {
          display(data);
        }
        // if any of the callbacks to `map` returned an error, it would halt 
        // execution and pass that error to the final callback.  So we don't pass
        // an error here, but rather a tuple of the file and load result.
        cb(null, [file, !!data]);
      });
    };
    async.map(file_list, loadHandler, done);
  }
], function(err, result) {
  if (err) return display(err);
  // All files loaded! (or failed to load)
  // result would be an array of tuples like [[file, bool file loaded?], ...]
});

waterfall 接受一个函数数组并按顺序执行它们，将每个函数的结果作为参数传递给下一个，并将回调函数作为最后一个参数传递，您可以使用错误或函数生成的数据调用它。

您当然可以在这两者之间或周围添加任意数量的不同异步回调，而不必更改代码的结构。 waterfall 实际上只有10个不同的流量控制结构中的一个，所以你有很多选择（虽然我几乎总是最终使用 auto，它允许您通过Makefile（如需求语法）在同一函数中混合并行和系列执行。

我有一个我正在研究的webapp这个问题，这就是我如何解决它（没有库）。

步骤1：写了一个 非常轻量级的pubsub实现。没有什么花哨。订阅，取消订阅，发布和记录。一切（带注释）总共增加了93行Javascript。在gzip之前是2.7kb。

第2步：通过让pubsub实现完成繁重工作，将您尝试完成的过程分离。这是一个例子：

// listen for when files have been fetched and set up what to do when it comes in
pubsub.notification.subscribe(
    "processFetchedResults", // notification to subscribe to
    "fetchedFilesProcesser", // subscriber

    /* what to do when files have been fetched */ 
    function(params) {

        var file_list = params.notificationParams.file_list;

        for (file in file_list) { // iteration, not enumeration
        var data = loadFile(file);

        if (!data) {
            display('failed to load: ' + file);
        } else {
            display(data);
        }
    }
);    

// trigger fetch files 
function fetchFiles(source) {

   // ajax call to source
   // on response code 200 publish "processFetchedResults"
   // set publish parameters as ajax call response
   pubsub.notification.publish("processFetchedResults", ajaxResponse, "fetchFilesFunction");
}

当然，这在设置中非常冗长，而且幕后的魔力很少。 以下是一些技术细节：

1. 我在用着 setTimeout 处理触发订阅。这样他们就能以非阻塞的方式运行。

2. 该呼叫实际上与处理分离。您可以为通知编写不同的订阅 "processFetchedResults" 一旦响应通过（例如记录和处理），并将它们保存在非常独立，小巧且易于管理的代码块中，就可以执行多项操作。

3. 上面的代码示例不解决回退或运行正确的检查。我相信它需要一些工具才能达到生产标准。只是想向您展示它的可能性以及您的解决方案与库无关的方式。

干杯!