Make sure loop is fully executed before running other code in jQuery

Question

I have a problem that a function keeps getting called before a loop finishes. How do I prevent the function from being called until after the loop finishes? My loop is outputting HTML tables to the page which is then being acted upon by my sortResultsByDate, but that can't happen until the HTML is rendered. Currently my second function is firing before the first one completes.

ns.executeUserSearch = function() {
    jQuery.each(searchInputArray, function(index, value) {
        ns.getUserSearchResults(searchInputArray, index);
    });

    ns.sortResultsByDate();
};

This should work fine. However, is your `getUserSearchResults` making an ajax call to get the results? In this case, it won't work. Also as Technoh says, are you meaning to call `getUserSearchResults` from itself? — Rhumborl, Mar 23 '16 at 20:15
Try a jQuery deferred: https://api.jquery.com/jquery.deferred/ — swatkins, Mar 23 '16 at 20:15
Possible duplicate of [Wait until all jQuery Ajax requests are done?](http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done) — Rhumborl, Mar 23 '16 at 21:32

score 0 · Answer 1 · answered Mar 23 '16 at 20:20

0

It seems you're calling ns.getUserSearchResults recursively inside the jQuery.each loop. ns.sortResultsByDate() is being executed once for every such call, so you end up executing it multiple times before you complete all your recursive calls.

answered Mar 23 '16 at 20:20

airbag

75
6

Make sure loop is fully executed before running other code in jQuery

1 Answers1