I have a js module which calls another js module:

/* InitModule */

//sets hdnMyUIWidget value to a defined template

MustacheTemplateLoader.LoadMustacheTemplates();

//calls Mustache.to_html(template, date)

UIBuilder.LoadMyUIWidget();

I'd say about 80% of the time the mustache template is available as expected in the hidden field by the time UIBuilder.LoadMyUIWidget() gets called. But 20% of the time it's not available.  

So it seems that I need to figure out how to tie a dependency to start the execution of UIBuilder.LoadMyUIWidget() based on the guaranteed completion of MustacheTemplateLoader.LoadMustacheTemplates();

Worst case scenario is I could create a timer to ensure that all of the hidden fields have been set before I exit MustacheTemplateLoader.LoadMustacheTemplates() but I'm guessing that there's a way to do this with Promises but I just don't know the best way to go about doing that.

To provide some additional context, MustacheTemplateLoader.LoadMustacheTemplates() has a for loop which loads a set of mustache templates from an array into hidden fields.  So if an array of 10 mustache templates has been defined then the control logic shouldn't continue to UIBuilder.LoadMyUIWidget until all 10 ajax calls to load the templates are complete.

What is the best modern way to implement this? It seems like this should be doable with standard jQuery. It seems like there may even be a simplified way to do this supported natively by Javascript in modern browsers.  My code does need to support IE10 though.