JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<script src="http://files.the-friend-family.com/log.js"></script>
<div id="data">In Flight Cnt: <span id="inflightCnt">0</span><br />
    Requests Sent So Far: <span id="sentCnt">0</span><br />
    Requests Remaining to Finish: <span id="remainingCnt"></span>
</div>

CSS

#data {
    position: absolute;
    top: 0;
    right: 75px;
    padding-top: 10px;
    
}

JavaScript

function outputCnt(c, sent, r) {
    document.getElementById("inflightCnt").innerHTML = c;
    var done = r.reduce(function(sum, val) {
        ++sum;
        return sum;
    }, 0);
    document.getElementById("remainingCnt").innerHTML = r.length - done;
    document.getElementById("sentCnt").innerHTML = sent;
}

function pMap(array, fn, limit) {
    return new Promise(function(resolve, reject) {
        var index = 0, cnt = 0, stop = false, results = new Array(array.length);
        
        function run() {
            while (!stop && index < array.length && cnt < limit) {
                (function(i) {
                    ++cnt;
                    ++index;
                    outputCnt(cnt, index, results);
                    fn(array[i]).then(function(data) {
                        results[i] = data;
                        --cnt;
	                    outputCnt(cnt, index, results);
                        // see if we are done or should run more requests
                        if (cnt === 0 && index === array.length) {
                            resolve(results);
                        } else {
                            run();
                        }
                    }, function(err) {
                        // set stop flag so no more requests will be sent
                        stop = true;
                        --cnt;
	                    outputCnt(cnt, index, results);
                        reject(err);
                    });
                })(index);
            }
        }
        run();
    });
}   

// process data in a random amount of time, return a promise
var cntr = 0;
function randomPromise(data) {
    ++cntr;
    log("sending request " + cntr);
    return new Promise(function(resolve) {
        // select random time 0-3999 ms
        var t = Math.floor(Math.random() * 4000);
        setTimeout(function() {
			resolve(data);
        }, t);
    });
}

var numRequestsTotal = 50;
var data = [];

// make data array
for (var i =...