JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="cons">
    <li value="0"><a href="#" onclick="start(); return false;">start</a></li>
</ol>

JavaScript

function pause(sec) {
    $.ajax({
        url: '/echo/json/',
        dataType: 'json',
        data: { json: "{}", delay: sec },
        async: true
    });
}
var cons = $('#cons');
function print(str) {
    cons.append('<li>[' + (new Date()).toTimeString().split(' GMT')[0] + ']: ' + str + '</li>');
}

// test code
window.start = function() {
    $('body').bind('special', function() {
        print('handler 1');
    }).bind('special', function() {
        print('handler 2 start');
        pause(3);
        print('handler 3 end');
    }).bind('special', function() {
        print('handler 3');
    });
    $.ajax({
        url: '/echo/json/',
        dataType: 'json',
        data: { json: "{}" },
        beforeSend: function() {
            $('body').trigger('special');
        },
        success: function() {
            print('main request success');
        }
    });
}