JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/0.9.6/q.min.js"></script>

JavaScript

var getDelayedString = function(string) {
    var deferred = Q.defer();
  
    setTimeout(function() {
        document.write(string+" ");
        deferred.resolve();
    }, 500);
    
    return deferred.promise;
};

var onceUponATime = function() {
    var strings = ["Once", "upon", "a", "time"];
    
    var promiseFuncs = [];
    
    strings.forEach(function(str) {
        promiseFuncs.push(getDelayedString(str));
    });
    
    //return promiseFuncs.reduce(Q.when, Q());
    return promiseFuncs.reduce(function (soFar, f) {
        return soFar.then(f);
    }, Q());    
};


getDelayedString("Hello")
.then(function() {
    return getDelayedString("world!")
})
.then(function() {
    return onceUponATime();
})
.then(function() {
    return getDelayedString("there was a guy and then he fell.")
})
.then(function() {
    return getDelayedString("The End!")
})