JSFiddle - React, Tailwind, and code Playground

by Kenneth Kin Lum

HTML

<main></main>

CSS

main {
    font: 12px Consolas, Monaco, monospace;
    white-space: pre-wrap;
}

JavaScript

var deferred = $.Deferred(),
    promise = deferred.promise();

var totalSteps = 0;

var timerID = setInterval(function () {

    var singleSteps = 1 + Math.floor(Math.random() * 10);

    totalSteps += singleSteps;

    deferred.notify({
        singleSteps: singleSteps,
        totalSteps: totalSteps
    });

    if (singleSteps === 10) {
        deferred.reject();
        clearInterval(timerID);
    } else if (totalSteps >= 30) {
        deferred.resolve(totalSteps);
        clearInterval(timerID);
    }

}, 1000);

promise.done(function (foo) {
    $("main").append("Person A: wow I just know that the promise was kept, with " + foo + " steps walked, at " + (new Date()).toLocaleTimeString() + "\n");
});

promise.fail(function () {
    $("main").append("Person A: wow I just know that the promise was not kept, at " + (new Date()).toLocaleTimeString() + "\n");
});

promise.progress(function (info) {
    $("main").append("Person A: wow Person B told me he just walked " + info.singleSteps + " steps, for a total of " + info.totalSteps + " steps, at " + (new Date()).toLocaleTimeString() + "\n");
});