JavaScript Recursion with promises -- order of execution error

Question

Building a method to create markup for a web app off canvas navigation. I am making async callback to another service that returns children of the parent menu node (see code below):

function GenerateMarkup(Terms, n) {
    var termsEnum = Terms.getEnumerator();
    var html = "<ul>";

    // Process top level terms
    while (termsEnum.moveNext()) {
        var currentTerm = termsEnum.get_current();        

        html += "<li>"

        if (currentTerm.get_termsCount() > 0) {
            var childcall = function() {
                var deferred = $.Deferred();

                html += "<a href=\"#\">" + currentTerm.get_name() + "<br><span>" + currentTerm.get_description() + "</span></a>";
                SPTermStore.GetTermsFromTermSet(currentTerm).then(function(termSet) {
                    if (typeof termSet !== undefined) {
                        deferred.resolve(GenerateMarkup(termSet, n++));
                    }
                    else
                        deferred.reject("something bad happened");
                });
                return deferred.promise();
            };

           $.when(childcall()).done(function(markup) {
                html += markup;
            });
        } // end if
        else
            html += "<a href=\"#\">" + currentTerm.get_name() + "</a>";

        html += "</li>"
    } // end while

    html += "</ul>";
    console.log("GenerateMarkup (" + n + "): " + html);
    return html;
} // end function

The issue is the order the markup is generated is not right; in a normal synchronous the recursive call to GenerateMarkup would complete, but in this situation I am trying to wait for the returned promise (i.e. the call to GenerateMarkup to complete) so I can append the html. The idea is as it iterates through the while, top level nodes will have their child nodes processed etc.

If I look at the console.log output this is what I get; the problem is the first listed markup below is what is returned to the page and not the combination of the below.

GenerateMarkup (0): <ul><li><a href="#">About<br><span>Our Company</span></a></li><li><a href="#">Portfolio<br><span>Our Properties</span></a></li><li><a href="#">Corporate Responsibility<br><span>Our Committment</span></a></li></ul>
GenerateMarkup (0): <ul><li><a href="#">Careers</a></li><li><a href="#">Core Values</a></li><li><a href="#">Governance</a></li><li><a href="#">History</a></li></ul>
GenerateMarkup (1): <ul><li><a href="#">Core Market Strategy</a></li><li><a href="#">Our Properties</a></li></ul>
GenerateMarkup (2): <ul><li><a href="#">Community Involvement</a></li><li><a href="#">CSR Report</a></li><li><a href="#">Diversity</a></li><li><a href="#">Sustainability</a></li></ul>

Any help would be appreciated.

Valerie Trotter · Accepted Answer · 2016-05-20 16:08:27Z

0

One possibility would be to loop through the termsenumerator, and load these into a deferred array. Then apply the $when, later. See sample below:

 var deferreds = [];
 for (var i = 0; i<termsenumerator; i++) {              
      deferreds.push(Grab data you want and push it into this array);             
 }

//Now that we have all the results... (deferred), process these.
        $.when.apply($, deferreds).done(function () {

            var resultdata = [];

            for (var i = 0; i < arguments.length; i++) {
                var daydata = arguments[i][2];                   
                applymarkupWData(resultdata.responseJSON.d,i);


            };

        });

answered May 20, 2016 at 16:08

Valerie Trotter

261 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

MarkC Over a year ago

That was a perfect solution! Thank you very much, I just learned a lot about .apply that I never knew :)

Alex E · Accepted Answer · 2016-05-20 16:01:08Z

0

Promises are asynchronous so they're not guaranteed to return in the order in which they're promised.

If the ordering is important, consider chaining the promises so that they execute in the sequence that you expect. Promise.then can be chained.

answered May 20, 2016 at 16:01

Alex E

164 bronze badges

Collectives™ on Stack Overflow

JavaScript Recursion with promises -- order of execution error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related