JSFiddle - React, Tailwind, and code Playground

HTML

<a id="start">start</a>

<a id="a">a</a>

<a id="b">b</a>

<a id="c">c</a>

JavaScript

$('#start').click(function () {
    var defa = $.Deferred();
    var defb = $.Deferred();
    var defc = $.Deferred();

    $('#a').trigger('click', defa);
    $('#b').trigger('click', defb);
    $('#c').trigger('click', defc);

    $.when(defa, defb, defc).done(function () {
        alert('Everything completed');
    });
});

$('#a').click(function (e, deferred) {
    // deferred completed ASAP
    if (deferred !== undefined) {
        deferred.resolve();
    }
});

$('#b').click(function (e, deferred) {
    //simulating a long call with window.setTimeout()
    window.setTimeout(function () {
        if (deferred !== undefined) {
            deferred.resolve();
        }
    }, 1000);
});

$('#c').click(function (e, deferred) {
    //this call takes 4 seconds!
    window.setTimeout(function () {
        //You can write additional long calculations here!
        
        if (deferred !== undefined) {
            deferred.resolve();
        }
    }, 4000);
});