JSFiddle - React, Tailwind, and code Playground

by DazWilkin

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<p>Successes</p>
<ol data-bind="foreach:success">
    <li data-bind="text:$data"></li>
</ol>
<br/>
<p>Failures</p>
<ol data-bind="foreach:failure">
    <li data-bind="text:$data"></li>
</ol>

CSS

html {
    font-family:"Arial";
}

JavaScript

/*globals $,jQuery,console,ko*/
$(function() {

    "use strict";

    var data, async, viewModel;

    data = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"];

    async = function(letter) {
        var $def = $.Deferred();
        if (Math.random() < 0.7) {
            // p=0.7 that it will resolve
            setTimeout(function() {
                $def.resolve(letter);
            }, 5000 * Math.random());
        } else {
            // p=0.3 that it will reject
            $def.reject(letter);
        }
        return $def.promise();
    };

    viewModel = {
        success: ko.observableArray([]),
        failure: ko.observableArray([])
    };
    ko.applyBindings(viewModel);

    $.when.apply($, data.map(function(letter) {
        var $defletter=$.Deferred();
        async(letter).done(function(letter) {
            console.log(new Date().toLocaleTimeString() + ": done");
            viewModel.success.push(letter);
        }).fail(function(letter) {
            console.log(new Date().toLocaleTimeString() + ": fail");
            viewModel.failure.push(letter);
        }).always($defletter.resolve);
        return $defletter.promise();
    })).always(function() {
        console.log("success");
    });
});