JSFiddle - React, Tailwind, and code Playground

by InfinitiesLoop

HTML

<h1>$.when() vs $.whenAll()</h1>


<ul id="log">
</ul>

CSS

body {
    font-family: Verdana;
}
h1 {
    font-size: 20px;
    border-bottom: 1px solid black;
    margin: 1em;
}

ul {
    margin: 1em;    
}

li {
    margin: 0.2em;
}

strong {
    font-weight: bolder;
}

JavaScript

$.whenAll = function( firstParam ) {
    var args = arguments,
        sliceDeferred = [].slice,
        i = 0,
        length = args.length,
        count = length,
        rejected,
        deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise )
            ? firstParam
            : jQuery.Deferred();
    
    function resolveFunc( i, reject ) {
        return function( value ) {
            rejected = true;
            args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
            if ( !( --count ) ) {
                // Strange bug in FF4:
                // Values changed onto the arguments object sometimes end up as undefined values
                // outside the $.when method. Cloning the object into a fresh array solves the issue
                var fn = rejected ? deferred.rejectWith : deferred.resolveWith;
                fn.call(deferred, deferred, sliceDeferred.call( args, 0 ));
            }
        };
    }
    
    if ( length > 1 ) {
        for( ; i < length; i++ ) {
            if ( args[ i ] && jQuery.isFunction( args[ i ].promise ) ) {
                args[ i ].promise().then( resolveFunc(i), resolveFunc(i, true) );
            } else {
                --count;
            }
        }
        if ( !count ) {
            deferred.resolveWith( deferred, args );
        }
    } else if ( deferred !== firstParam ) {
        deferred.resolveWith( deferred, length ? [ firstParam ] : [] );
    }
    return deferred.promise();
};

function log(success, name) {
    $("<li/>", {
        html: "[" + name + "]: " +
              "a.isResolved: <strong>" + a.isResolved() + "</strong>" +
            ", b.isResolved: <strong>" + b.isResolved() + "</strong>" +
            ", c.isResolved: <strong>" + c.isResolved() + "</strong>"
    }).appendTo("#log");
}
function success(name) {
    return function() {
        log(true, name);
    };
}
function fail(name) {
    return function() {
        log(false,...