JS continue after multiple .load()-functions done

Question

I'm having a problem with an asynchronous JS function. Well I have a function which inserts elements one by one. This works. But I would like to continue after all .load()-functions are done.

The way I've implemented the Deferred() part is obviously wrong but I have no clue how to achieve this.

Note: I have simplified the code for a better clarity.

var d = new jQuery.Deferred();
var i = index;
function loadView() {
    if(i > -1 && i < array.length) {
        if(!jQuery.contains(document.documentElement, $(selector)[0])) {
            /* do stuff here */
            panel.load(myPHPfile, function() {
                $dom.append($(selector));
                i++;
                if(i < array.length) {
                    loadView();
                    d.resolve();
                }
            });
        }
    }
}
loadView();

jQuery.when(d).then(function() {
    /* when all elements are insert, do something */
});

I am thankful for any help!

T.J. Crowder · Accepted Answer · 2017-04-12 10:22:34Z

1

If i < array.length after incrementing, that means you're not done, so you don't want to resolve your Deferred there. Instead:

if(i < array.length) {
    loadView();
} else {                   // ***
    d.resolve();
}

Separately, you don't need to use jQuery.when. Just:

d.then(function() {
    /* when all elements are insert, do something */
});

answered Apr 12, 2017 at 10:22

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Collectives™ on Stack Overflow

JS continue after multiple .load()-functions done

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related