JSFiddle - React, Tailwind, and code Playground

by xonev

HTML

<h2>List 1</h2>
<ul id='list1'>
</ul>

<h2>List 2</h2>
<ul id='list2'>
</ul>

JavaScript

try {
    (function () {
        var requestNum = 0;
        var queuedCbs = [];
        
        var queueRequest = function (callback) {
            queuedCbs.push(callback);
        };
        
        var executeRequests = function () {
            var i;
            for (i = 0; i < queuedCbs.length; ++i) {
                queuedCbs[i]();
            }
            queuedCbs = [];
        };
        
        // Won't work the way you want it to:
        for (; requestNum < 10; ++requestNum) {
            queueRequest(function () {
                $('#list1').append(
                    '<li>Request #' +
                    requestNum +
                    ' completed.</li>');
            });
        }
        
        executeRequests();
        
        var callbackWithRequestNum = function (i) {
            return function () {
                $("#list2").append(
                    '<li>Request #' +
                    i +
                    ' completed.</li>');
            };
        };
        
        // This will do what you'd expect:
        for (requestNum = 0; requestNum < 10; ++requestNum) {
            queueRequest(callbackWithRequestNum(requestNum));
        }
        
        executeRequests();
    }());
}
catch (e) {
    window.alert(e);
}