JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"><div>

JavaScript

var Process1 = function(){
    this.dfd = new $.Deferred();
    this.process();
    return this.dfd.promise();
}    
Process1.prototype.process = function(){
    // backend process 1 taking 1 sec
    setTimeout(function(){
      this.dfd.notify('process1 done');
      this.dfd.resolve();
    }.bind(this), 1000);
  $("#output").append("<span>[1]</span>");
}

var Process2 = function(){
    this.dfd = $.Deferred();
    this.process();
    return this.dfd.promise();
}    
Process2.prototype.process = function(){
    // backend process 2 taking 2 sec
    setTimeout(function(){
      this.dfd.notify('process2 done');
      this.dfd.resolve();
    }.bind(this), 2000);
}

$.when(new Process1(), new Process2())
    .progress(function(msg1, msg2){
        $("#output").append("<span>["+msg1+","+msg2+"]</span>");
    })
    .then(function(){
        $("#output").append("<span>[all ok]</span>");
    })
    .fail(function(){
        $("#output").append("<span>[something went wrong</span>");
    });