JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<div id=test>???</div>
<div id=status>Script is running ...</div>

CSS

#test { font-size: xx-large; color: red; }

JavaScript

// function that makes a request and returns a promise:
function testAjax() {
    return $.ajax({
        url: '/echo/json/',
        type: 'POST',
        data: {
            json: '123',
            delay: 2
        }
    });
}

// function that expects a promise as an argument:
function displayData(x) {
    x.success(function(realData) {
        $('#test').text(realData).css({color: 'green'});
    });
}

// get a promise from testAjax:
var promise = testAjax();

// give a promise to other function:
displayData(promise);

// Reached the end of the script:
$('#status')
    .text('Main script is done without waiting for data.');

// Example by http://stackoverflow.com/users/613198/rsp
// for http://stackoverflow.com/questions/5316697