JSFiddle - React, Tailwind, and code Playground

by amatiasq

HTML

<script src="http://amatiasq.com/fiddle-console.js"></script>
<button>Add chunk</button>

JavaScript

var eventLoop = {
    _queue: [],

    add: function (fn) {
        console.log("Added", fn.name, "to the queue");
        
        // we add a function to the queue
        this._queue.push(fn);

        // if it's idle run the function
        if (!this.running) this.executeNext();
    },

    executeNext: function () {
        if (this.running || this._queue.length === 0)
            return;

        this.running = true;
        var block = this._queue.shift();
        console.log("Executing", block.name);
        block();
        this.running = false;
        
        this.executeNext();
    }
};

function block1() {
    console.log("I'm block1 and I'm being executed :)");
    // insert block2 into the even loop
    eventLoop.add(block2);
}

function block2() {
    console.log("I'm block2 and I'm being executed too :)");
}

eventLoop.add(block1);


// You can add chunks just clicking the button

function blockButton() {
    console.log("I'm blockButton and I'm being executed :)");
}

document.querySelector('button')
.addEventListener('click', function() {
    eventLoop.add(blockButton);
});