JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div class="pagina">Página antiga <a href="#">Trocar</a>
</div>
<div class="pagina">A página nova diz: <strong></strong><br/>
    <a href="#">De novo</a>
</div>

CSS

.pagina {
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

JavaScript

function semaforo(numero, callback) {
    var array = [];
    return function proxy(indice, fn) {
        if ( !fn ) fn = function() { };
        return function handler() {
            array[indice] = fn.apply(this, arguments);
            if ( --numero == 0 )
                callback.apply(this, array);
        }
    }
}

$(".pagina:eq(1)").hide();

$("a:eq(0)").click(function (e) {
    e.preventDefault();
    
    var proxy = semaforo(2, function() {
        $(".pagina:eq(1)").show(2000);
    });
    
    // Ação 1: esconder a página
    $(".pagina:eq(0)").hide(Math.random()*4000, proxy(0));

    // Ação 2: carregar a nova
    $.getJSON('/echo/json/', {
        delay: Math.ceil(Math.random()*3 + 0.00001),
        json: '{"mensagem":"Olá, mundo!"}'
    }).done(proxy(1, function (data) {
        $(".pagina:eq(1)")
            .find("strong")
            .text( /*data.mensagem*/ "Olá, mundo!") // WTF jsFiddle?!
    }));
});

$("a:eq(1)").click(function (e) {
    e.preventDefault();
    $(".pagina:eq(0)").show();
    $(".pagina:eq(1)").hide().find('strong').text("");
});