多个异步回调javascript如何解决此问题？

我陷入了一场混乱，可能涉及多个异步回调情况

我有一个名为populatePageArea（）的javascript函数

在populatePageArea中，它像数组一样遍历变量pages和其他代码

function populatePagesArea() {
  // there was some code before the for loop

  for (var i=0, l=pages.length; i<l; i++) {    
    addToPagesArea(pages[i], "");   
  }

  // some code after...
}

function addToPages(file, front) {
  // there was some code before..
  reader = new FileReader();
  reader.onload = (function (theDiv) {
    return function (evt) {
      var backgroundimage = "url(" + evt.target.result + ")";
  theDiv.css("background-image", backgroundimage);
      var sizeSettings = getSizeSettingsFromPage(file, calculateRatio);

};

  }(imageDiv));

  // step#3 execute file reader
  reader.readAsDataURL(file);
  // there was some code after..
}

所以每次我预览文件的时候，我都会尝试对文件的尺寸进行一些计算

function getSizeSettingsFromPage(file, whenReady) {
    reader = new FileReader();
    reader.onload = function(evt) {
        var image = new Image();
        image.onload = function(evt) {
            var width = this.width;
            var height = this.height;
            var filename = file.name;
            if (whenReady) {
                whenReady(width, height, filename);
            }
        };
        image.src = evt.target.result; 
    };
    reader.readAsDataURL(file);

}
 function calculateRatio(width, height, filename) {

    var ratio = width/height;

    var object = new Object();
    object['height']    = width;
    object['width']     = height;
    object['ratio']     = ratio;
    object['size']      = 'Original';

    for (var size in SIZES) {
        var min = SIZES[size].ratio - 0.01;
        var max = SIZES[size].ratio + 0.01;

        if (ratio <= max && ratio >= min) {
            object['size'] = size;
        }
    }

    pageSizes.add(filename, object);

}

但是，因为我认为没有对所有预览的图像调用Calculatario，所以调用getMajorityPageSize时，PageSize总是空的

如何确保在调用populatePagesArea后，只有在所有

页面

都完成了计算功能后，才会触发getMajorityPageSize？

我相信这是异步回调。但是我不知道如何对需要接受类似calculateRatio的异步回调函数的对象数组执行此操作。

简单的解决方案（我用

/***

标记了我的更改）：

// ***
var totalPages;

function populatePagesArea() {
  // there was some code before the for loop

  // ***
  totalPages = pages.length;
  for (var i=0, l=pages.length; i<l; i++) {    
    addToPagesArea(pages[i], "");   
  }

  // some code after...
}

function addToPages(file, front) {
    // there was some code before..
    reader = new FileReader();
    reader.onload = (function (theDiv) {
      return function (evt) {
        var backgroundimage = "url(" + evt.target.result + ")";
        theDiv.css("background-image", backgroundimage);
        var sizeSettings = getSizeSettingsFromPage(file, calculateRatio);
        // *** Check to see if we're done after every load
        checkPagesReady();
      };

    }(imageDiv));

    // step#3 execute file reader
    reader.readAsDataURL(file);
    // there was some code after..
}

// *** Call getMajorityPageSize() here, only after all pages have loaded.
function checkPagesReady() {
    if (pageSizes.length >= totalPages)
        getMajorityPageSize();
}

//***
var totalPages；
函数populatePagesArea（）{
//在for循环之前有一些代码
// ***
totalPages=pages.length；
对于（var i=0，l=pages.length；i简单解决方案（我已用
/***
标记了我的更改）：

// ***
var totalPages;

function populatePagesArea() {
  // there was some code before the for loop

  // ***
  totalPages = pages.length;
  for (var i=0, l=pages.length; i<l; i++) {    
    addToPagesArea(pages[i], "");   
  }

  // some code after...
}

function addToPages(file, front) {
    // there was some code before..
    reader = new FileReader();
    reader.onload = (function (theDiv) {
      return function (evt) {
        var backgroundimage = "url(" + evt.target.result + ")";
        theDiv.css("background-image", backgroundimage);
        var sizeSettings = getSizeSettingsFromPage(file, calculateRatio);
        // *** Check to see if we're done after every load
        checkPagesReady();
      };

    }(imageDiv));

    // step#3 execute file reader
    reader.readAsDataURL(file);
    // there was some code after..
}

// *** Call getMajorityPageSize() here, only after all pages have loaded.
function checkPagesReady() {
    if (pageSizes.length >= totalPages)
        getMajorityPageSize();
}

//***
var totalPages；
函数populatePagesArea（）{
//在for循环之前有一些代码
// ***
totalPages=pages.length；
对于（var i=0，l=pages.length；iHi Nathan，谢谢！我只对您的代码做了一个更改。我将checkpagesrady的调用移到了Calculatario的最后一行。顺便问一下，与Promissions相比，我遇到了这个问题，哪一个更具前景？呵呵，双关语。如果您打算大量使用Node，您链接到的异步库m这可能非常有用，因为它更接近节点约定。但是，我认为承诺是一个更健壮、更强大的解决方案，并且已经有一些努力将节点移向那个方向。此外，还有很多讨论。因此我肯定认为它们值得学习。我看到了Q中描述的末日金字塔github上的.js自述文件。我已经对它很感兴趣。我现在的代码中有几个这样的金字塔！谢谢你的建议，Nathan！嗨Nathan，我接受了你的建议并尝试使用承诺进行重构。但是，阅读了文档后，我仍然不太确定如何进行重构。我已经将最重要的部分提炼到github中回复并进入这个问题。希望你能给我一些建议。嗨，内森，谢谢！我只对你的代码做了一个更改。我把调用checkpagesrady移到了计算器的最后一行。顺便问一下，我遇到了这一点，与承诺相比，哪一个更有希望？嘿，双关语。如果你打算大量工作对于Node，您链接到的异步库可能非常有用，因为它更符合节点约定。但是，我认为Promissions是一个更健壮、功能更强大的解决方案，并且已经做出了一些努力来将节点移向该方向。此外，还有很多讨论。因此我肯定认为它们值得学习ng.我在github上看到了Q.js自述文件中描述的末日金字塔。我已经被说服了。我现在的代码中有几个这样的金字塔！感谢你的建议，Nathan！嗨Nathan，我接受了你的建议，并尝试使用承诺进行重构。但是，阅读了文档后，我仍然不太确定如何进行重构。我已经完成了distil将最重要的部分引入github回购协议，并引入这个问题。希望您能给我一些建议。