Wait for all .then() to be executed before firing a single function

Question

I'm trying to fire a function when all the templates are loaded. This is done via a loadTemplate function for each template.

My problem is how to listen for all the .then() to finish, and only after that to fire my foo() function.

I've tried using when() and promise, but I haven't been successful in binding that to the outside each, while I've manage to bind it to the loadTemplate (which isn't what I'm looking for).

I could always bind each loadTemplate to a counter, and on each iteration check if the counter has reached the number of templates on the each, but I'm sure there's a more elegant way to do this.

Here's the loop code:

    $.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;
          });
      });

and the function to fire after:

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

Thanks for the help!

Edit: Including the loadTemplate code as well:

    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
        });
      });
    }

*but I'm sure there's a more elegant way to do this* I'm not so sure about that. — lilezek, Oct 08 '15 at 10:29

Ben Guest · Accepted Answer · 2015-10-08T10:57:06.020

2

As your loadTemplate function returns a promise, you can use .when(). See the documentation example for a case of waiting for multiple promises to be resolved.

You could do something like:

var promises = [];

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

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

As for your loadTemplate function, you don't need to create your own promise. $.ajax returns a promise by default.

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

See if that makes a difference? Also try without the async property. I'm not sure why that would fix it but it is worth trying.

edited Oct 08 '15 at 10:57

answered Oct 08 '15 at 10:34

Ben Guest

1,488
2
17
29

But how do I save all the promises, so I can then use them with .when()? – Ineze Oct 08 '15 at 10:39
I edited my answer to give an example – Ben Guest Oct 08 '15 at 10:40
Thanks for the example. It's still firing templateDone before all the promises are done, but I feel it's close to solving this. – Ineze Oct 08 '15 at 10:44
Hmm that is strange. What does the code inside loadTemplate look like? I'm guessing its using $.ajax? – Ben Guest Oct 08 '15 at 10:49
It is, yes. I'll update my question with the code for the loadTemplate – Ineze Oct 08 '15 at 10:50
I edited my answer with some suggestions – Ben Guest Oct 08 '15 at 10:57
The problem was with the promise inside the loadTemplate, as you pointed out. Thank you very much! – Ineze Oct 08 '15 at 11:02
No problem. I think it was because you were returning a native promise rather than a jQuery promise. – Ben Guest Oct 08 '15 at 11:03

Harry Bomrah · Answer 2 · 2015-10-08T10:35:02.347

1

You can write simple condition to check if all the templates are loaded like this

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();
        }
      });
  });

I hope this works for you. You can use this approach even if you are loading templates with ajax calls. Calling function after $.each wont work if you are loading templates with ajax..

edited Oct 08 '15 at 10:35

answered Oct 08 '15 at 10:32

Harry Bomrah

1,658
1
11
14

Yes, this works. I was wondering, however, if there was a way to do this by events rather than with a counter – Ineze Oct 08 '15 at 10:34
Counter is good and efficient way as I said if you want to load templates even using ajax calls. There is no callback event for $.each function so there is no event raised when $.each is completed. – Harry Bomrah Oct 08 '15 at 10:37

Wait for all .then() to be executed before firing a single function

2 Answers2