JSFiddle - React, Tailwind, and code Playground

by Adam Patridge

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
    <button class="btn" id="red">&nbsp;</button>
    <button class="btn" id="green">&nbsp;</button>
    <button class="btn" id="blue">&nbsp;</button>
</div>
<div>
    Next: <span class="btn" id="next">&nbsp;</span>
</div>

CSS

div { margin: 1em; line-height: 3em; }
#next { background-color: gray; cursor: default; }
#red { background-color: red; }
#blue { background-color: blue; }
#green { background-color: green; }

JavaScript

$(function () {
    var getRandomArbitrary = function (min, max) {
        return Math.random() * (max - min) + min;
    };
    var getRandomDelay = function (minTimeInMs, maxTimeInMs) {
        var delayInMs = getRandomArbitrary(minTimeInMs, maxTimeInMs);
        console.log("Delay %dms", delayInMs);
        return $.Deferred(function (dfd) {
            setTimeout(dfd.resolve, delayInMs);
        }).promise();
    };
    var getNextColor = function () {
        var colors = ["red", "green", "blue"];
        return $.Deferred(function (dfd) {
            getRandomDelay(1000, 8000).done(function () {
                dfd.resolve(getRandomArbitrary(0, colors.length - 1));
            });
        });
    };
    var getNextPromise = function () {
    };
    
    var current = getNextPromise();
    $("button").on("click", function (e) {
        
        e.preventDefault();
    });
    
//    getRandomDelay(1000, 8000).done(function () {
//        console.log("Delay done, dude!");
//    });
});