JSFiddle - React, Tailwind, and code Playground

by Rui Figueiredo

HTML

<fieldset header="Messages">
    <div id="messagePanel"></div>
</fieldset>
<button id="btCallback">Perform asynchronous operation using callback</button>
<button id="btPromise">Perform asynchronous operation using promises</button>

JavaScript

//imagine this is the same as $.ajax and that it takes 1 seconds to complete
var performAjaxCall = function (onDone) {
    var deferred = $.Deferred();
    setTimeout(function(){
        if (onDone){
            onDone();
        }
        deferred.resolve();
    }, 1000);
    return deferred;
};

var clearMessagePanel = function(){
    $('#messagePanel').empty();
};

var writeMessage = function(message){
    $('#messagePanel').append("<p>" + message +"</p>");
};


$('#btCallback').on("click", function(){
    clearMessagePanel();
    writeMessage("Starting ajax call");
    var onDoneCallback = function() {
        writeMessage("Completed callback");
    };
    performAjaxCall(onDoneCallback);
});

$('#btPromise').on("click", function(){
    clearMessagePanel();
    writeMessage("Starting ajax call");    
    var performingAjaxCallPromise = performAjaxCall();
    performingAjaxCallPromise.done(function(){
        writeMessage("Completed promise");
    });
});