JSFiddle - React, Tailwind, and code Playground

by Garth Edwards

HTML

<script src="https://rawgithub.com/kriskowal/q/v1/q.js"></script>
<div id="before">
    This is the BEFORE function - I have not run yet
</div>
<br>
<br>
<div id="async">
    This is the ASYNCHRONOUS function - I have not run yet
</div>
<br>
<br>
<div id="after">
    This is the AFTER FUNCTION function - I have not run yet
</div>

JavaScript

console.log('my BEFORE function');
before();

console.log('just about to call my asynchronous function');
asynchronousFunction()
.then(function(data){
	console.log('in the then after my asynchronous function with ', data);
});

console.log('my AFTER function');
after();

/*============== FUNCTION DEFINITIONS ==============*/

function before (){
    $("#before").html("My BEFORE function has run");
}

function asynchronousFunction (){
	var deferred = Q.defer();
    setTimeout(
        function(){
            console.log('just completed my asynchronous function');
            $("#async").html("My ASYNCHRONOUS function has run");
            deferred.resolve('my resolve variable');
    	},
    3000);
    
    return deferred.promise
};

function after (){
    $("#after").html("My AFTER function has run");
}