ES6 promise loop patterns

Shows various styles/patterns of using promises to loop over asynchronous work functions

by codemeasandwich

HTML

<h1>Loop patterns using ES6 promises</h1>

<note>This code requires a browser supporting HTML5 plus ES6 JavaScript, e.g. Chrome or Firefox</note>
<log id="log"></log>

CSS

body {
    font-family: Sans-serif;
}
h1 {
    font-size: 1.2em;
    font-weight: 700;
}
h2 {
    font-size: 1.1em;
    font-weight: 700;
    margin: 0;
}
note {
    display: block;
    background-color: #ee9;
    border: dashed 2px #ddd;
    font-style: italic;
    font-size: 1em;
    margin: 1em 0;
}

JavaScript

$('#log').append("Our async work-tasks take an average 100ms (range of 1-200ms)...");
$('#log').append("<br />");

/*
//synchronous equivalent:
var syncResult = syncWork("10 iterations: <br />");
$('#log').append("<h2>Synchronous</h2>");
$('#log').append(syncResult);
$('#log').append("<br />");
*/

//async examples:
var ticks2 = (new Date()).valueOf();
var p2 = asyncLoopOrdered("10 iterations: <br />", 10).then(function (result) {
    var endTicks = (new Date()).valueOf();
    $('#log').append("<h2>Random with output ordered, done in " + (endTicks - ticks2) + " ms: </h2>");
    $('#log').append(result); //even though they executed randomly, the results are in order because we appended them in order once they were all completed.
    $('#log').append("<br />");
});

var ticks3 = (new Date()).valueOf();
var p3 = asyncLoopRandom("10 iterations: <br />", 10).then(function (result) {
    var endTicks = (new Date()).valueOf();
    $('#log').append("<h2>Random with output random, done in " + (endTicks - ticks3) + " ms: </h2>");
    $('#log').append(result);
    $('#log').append("<br />");
});

var ticks6 = (new Date()).valueOf();
var p6 = seqLoopReduce("10 iterations: <br />", 10).then(function (result) {
    var endTicks = (new Date()).valueOf();
    $('#log').append("<h2>Sequential reduced, done in " + (endTicks - ticks6) + " ms: </h2>");
    $('#log').append(result);
    $('#log').append("<br />");
});

var ticks7 = (new Date()).valueOf();
var p7 = maxRequestsPerPeriodThrottle("10 iterations: <br />", 10, 3, 5).then(function (result) {
    var endTicks = (new Date()).valueOf();
    $('#log').append("<h2>Throttled to 3 requests per 5ms, done in " + (endTicks - ticks7) + " ms: </h2>");
    $('#log').append(result);
    $('#log').append("<br />");
});

var ticks8 = (new Date()).valueOf();
var p8 = maxInProcessThrottle("10 iterations: <br />", 10, 3).then(function (result) {
    var endTicks = (new Date()).valueOf();
    $('#log').append("<h2>Throttled to 3 in-process at...