JSFiddle - React, Tailwind, and code Playground

by amatiasq

HTML

<script src="http://amatiasq.com/fiddle-console.js"></script>
<button>Añadir bloque</button>

JavaScript

var eventLoop = {
    _queue: [],

    add: function (fn) {
        console.log("Añadido", fn.name, "a la cola");
        
        // añadimos la función a la cola
        this._queue.push(fn);

        // si está desocupado ejecutar la función
        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("Ejecutando", block.name);
        block();
        this.running = false;
        
        this.executeNext();
    }
};

function block1() {
    console.log("Soy block1 y me están ejecutando :)");
    
    // poner un nuevo bloque en el event loop
    eventLoop.add(block2);
}

function block2() {
    console.log("Soy block2 y me están ejecutando :)");
}

eventLoop.add(block1);


// Puedes añadir bloques clickando el botón

function blockButton() {
    console.log("Soy blockButton y me están ejecutando :)");
}

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