JSFiddle - React, Tailwind, and code Playground

by bartvanderwal

HTML

<b>Log</b>
<div id="log"></div>

JavaScript

// Log a message (line) on the screen.
function log(message) {
    $('#log').append('<br>' + message);
}

function prependZero(anInt) {
    if (anInt>=0 && anInt < 10) {
        return '0' + anInt;
    }
    return anInt.toString();
}

function getCurrentTime() {
    var dt = new Date();
    var hours = prependZero(dt.getHours());
    var minutes = prependZero(dt.getMinutes());
    var seconds = prependZero(dt.getSeconds());
    var millis = prependZero(dt.getMilliseconds());
    var time = hours + ":" + minutes + ":" + seconds + "." + millis;
    return time;
}


// The most generic function that only waits and returns a promise.
function wait(t, v) {
    var d = new $.Deferred();
    setTimeout(function() {
        d.resolve(v);
    }, t);
    return d.promise();
}

// Logs the value and returns the next number.
function markStep(nr) {
    log('step ' + nr + ': ' + getCurrentTime());
    return nr+1;
}
// Waits before logging and returns a promise for the next number.
function takeStep(nr) {
    return wait(stepTime, nr).then(markStep);
}

var stepTime = 1000;

log('start (' + getCurrentTime() + ')');

takeStep(0)
.then(takeStep)
.then(takeStep)
.then(takeStep)
.then(takeStep)
.done(function(nr) {
    log('done (' + getCurrentTime() + ')');
});