JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div id="userArea">
    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
    <button id="btn3">Button 3</button>
    <button id="btn4">Button 4</button>
</div>
<button id="btnRun">Run</button>
<div id="result"></div>

JavaScript

var myButtonFunctions = {
    "btn1": function() {writeResult("1");},
    "btn2": function() {writeResult("2");},
    "btn3": function() {writeResult("3");},
    "btn4": function() {writeResult("4");}
}
var myPromise;
var myFunctionQueue=[];
document.getElementById('btn1').onclick = onButtonClick;
document.getElementById('btn2').onclick = onButtonClick;
document.getElementById('btn3').onclick = onButtonClick;
document.getElementById('btn4').onclick = onButtonClick;
document.getElementById('btnRun').onclick = onRunButtonClick;
function onButtonClick() {
    writeResult('button clicked');
    myFunctionQueue.push(myButtonFunctions[this.id]);    
}

function myPromiseMain(resolve, reject) {
    writeResult('myPromiseMain called');
    if(myFunctionQueue.length === 0) {
        reject(function() {
            writeResult('no functions to run');
        });
    }
    else {
        resolve(writeResult('resolved promise'));
    }
}

function onRunButtonClick() {    
    if(!myPromise) {
        writeResult('defining promise');
        myPromise = new Promise(myPromiseMain)
        .then(queueIterator)
        .then(function(){myPromise = undefined;});
    }
}

function queueIterator() {
 var currentQueueLength = myFunctionQueue.length;
            for(var fx=currentQueueLength-1;fx >= 0;fx--)
            {
                writeResult('chaining function at index: ' + fx);                
                new Promise(function(resolve,reject){
                        resolve(myFunctionQueue[fx]());
                    });
                myFunctionQueue.splice(fx,1);
            }  
             queueIterator();
}

function writeResult(valueToWrite) {
       document.getElementById('result').innerHTML += 
           valueToWrite +"</br>" ;
}