JSFiddle - React, Tailwind, and code Playground

HTML

<button id="x">Show</button>
<ol>
    <li><span style="display:none">One</span>

    </li>
    <li><span style="display:none">Two</span>

    </li>
    <li><span style="display:none">Three</span>

    </li>
    <li><span style="display:none">Four</span>

    </li>
</ol>
<pre id="log">
</pre>

JavaScript

$(function () {

    $("#x").click(function () {
        $("li").each(function () {
            $(this).find("span").show(200, {
                complete: function () {
                    console.log("completed\n");
                }
            })}).find("span").promise().done(function () {
                console.log("done\n");
            });

        /* $("li > span").show({complete:function(){
            $("#log").append("completed\n");
        }}).promise().done(
        function(){
            $("#log").append("done\n");
        }
        );*/
    });
});