JSFiddle - React, Tailwind, and code Playground

by donniec

HTML

<h2>Eat, Sleep, Work</h2>
<ul>
</ul>

JavaScript

//Solution 1
//eat();
//sleep();
//work();

//Solution 2
//sleep(function(){
//    eat(function(){
//        work();  
//    });
//});

//Solution 3
eat()
.then(function(){ 
    return sleep();
})
.then(function(){
    return work()
});

function eat(callback){
    return asyncPrint('eat', callback);
}

function sleep(callback){
     return asyncPrint('sleep', callback);   
}

function bathe(callback){
    return asyncPrint('bathe', callback);
}

function work(callback){
     return asyncPrint('work', callback);   
}

function asyncPrint(msg, callback){
    return new Promise(function(resolve, reject){
        randomAsync(function(){
            print(msg);
            if(callback) callback();
            resolve();
        });
    });
}

function print(msg){
    var li = document.createElement('li');
    li.innerHTML = msg;
    document.querySelector('ul').appendChild(li);
}

function randomAsync(callback){
    var timeout = Math.round(Math.random() * 100);
    setTimeout(callback, timeout);
}