JSFiddle - React, Tailwind, and code Playground

JavaScript

var body = $(document.body), i = 0;

// creates a new function that creates a deferred, resolves
// it after a period of time, and returns a promise
function create( name ){
    return $.Deferred(function(){
        this.done(function(){
            body.append('<p>' + name + ' done!');
        });
        
        setTimeout(this.resolve, (i++ * 10));
       // this.resolve;
    }).promise();
}

// create an array of promises
var promises = [];

function init() {
    loadPromises();
    
    // apply the array to $when
    $.when.apply( null, promises ).then(function(){
        body.append( '<p>Process Ratings</p>' );
    }).then(function() {
        body.append( '<p>all functions are complete!</p>' );
    });
}

function loadPromises() {
    promises.push(create('foo') );
    promises.push(create('fam'));
    promises.push(create('bar'));
    promises.push(create('baz'));
}

init();