在触发单个函数之前等待所有 .then() 执行[重复]

Question

我正在尝试在加载所有模板时触发一个函数。这是通过每个模板的 loadTemplate 函数完成的。

我的问题是如何监听所有 .then() 完成，然后才触发我的 foo() 函数。

我尝试过使用 when() 和 promise，但是我没有成功地将它们绑定到外部，而我已经设法将它绑定到 loadTemplate（这不是我想要的为）。

我总是可以将每个 loadTemplate 绑定到一个计数器，并在每次迭代时检查计数器是否已达到每个模板的数量，但我确信有一种更优雅的方法可以做到这一点。

这是循环代码：

    $.each(templates.hbs, function(idx, template) {
        loadTemplate(template.name)
          .then(function(templateStr){
            var compiledTemplate = Handlebars.compile(templateStr);
            if(template.isPartial){
              Handlebars.registerPartial(template.key, compiledTemplate);
            }
            templates[template.key] = compiledTemplate;
          });
      });

以及触发后的函数：

    function templateDone(){
      console.log("done!");
    }

感谢您的帮助！

编辑：也包括 loadTemplate 代码：

    function loadTemplate (template) {
      return new Promise(function (resolve, reject) {
        $.ajax({
          url: config.wwwroot + '/folder/' + template + '.hbs',
          async: false,
          success: function (result) {
            resolve(result);
          },
          error: reject
        });
      });
    }

Answer 1

当您的 loadTemplate 函数返回一个承诺时，您可以使用 .when()。请参阅 documentation 示例，了解等待解决多个 Promise 的情况。

你可以这样做：

var promises = [];

$.each(templates.hbs, function (idx, template) {
    promises.push(loadTemplate(template.name));
});

$.when.apply($, promises).then(templateDone);

至于您的 loadTemplate 函数，您不需要创建自己的 Promise。 $.ajax 默认返回一个承诺。

function loadTemplate(template) {
    return $.ajax({
        /* ... */
    });
}

看看这有什么不同吗？也尝试不使用 async 属性。我不知道为什么这会解决它，但值得一试。

Answer 2

您可以编写简单的条件来检查是否所有模板都像这样加载

var loaded_template = 0;  
$.each(templates.hbs, function(idx, template) {
    loadTemplate(template.name)
      .then(function(templateStr){
        var compiledTemplate = Handlebars.compile(templateStr);
        if(template.isPartial){
          Handlebars.registerPartial(template.key, compiledTemplate);
        }
        templates[template.key] = compiledTemplate;
        loaded_template++;
        if(loaded_template == templates.hbs.length){
         foo();
        }
      });
  });

我希望这对你有用。即使您使用 ajax 调用加载模板，您也可以使用这种方法。如果您使用 ajax 加载模板，则在 $.each 之后调用函数将不起作用..