JSFiddle - React, Tailwind, and code Playground

HTML

<form id="color-form">
    <label> Red <input type="radio" name="color" value="red" checked="checked"/> </label>
    <label> Green <input type="radio" name="color" value="green"/> </label>
    <label> Blue <input type="radio" name="color" value="blue"/> </label>
    <button type="submit">Queue next color</button>
</form>

JavaScript

function changeColorAsync(color) {
    var d = $.Deferred();
    
    setTimeout(function () {
        $('body').css('background', color);
        
        d.resolve();

    }, 4000);
    
    return d;
}

$(function () {
    $('#color-form').on('submit', function (e) {
        var color = $(this).find(':checked').val(), d;
        
        d = d? 
            d.then(changeColorAsync.bind(this, color)) : 
            changeColorAsync(color);
        
        return false;
    });
});