JSFiddle - React, Tailwind, and code Playground

by bartvanderwal

HTML

<p>Log</p></br/>
<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 time = hours + ":" + minutes + ":" + seconds;
    return time;
}

// Print a message of given step to the log, together with current time.
function markStep(nr) {
    log('step ' + cntr + ': ' + getCurrentTime() );
}

function takeStep() {
    deferreds.push(new $.Deferred());
    deferreds[cntr].done(function() {
        markStep();
    });
    cntr++;
    setTimeout(function() {
        deferreds[cntr-1].resolve();
    }, stepTime);
    return deferreds[cntr-1].promise();
}

var stepTime = 1000;
var cntr = 0;
var deferreds = [];

takeStep();

$.when(takeStep())
    .then(takeStep())
    .then(takeStep())
    .then(takeStep())
    .done(function() {
        log('done (' + getCurrentTime() + ')');
    });