javascript - 次の関数の読み込みが完了する前に jQuery Spinner が表示されない

Question

スピナー ( iOS Spinner )を表示および非表示にする 2 つの関数を作成しました。

    var overlay;

    function startSpin() {
        var opts = {
                lines: 13, // The number of lines to draw
                length: 11, // The length of each line
                width: 5, // The line thickness
                radius: 17, // The radius of the inner circle
                corners: 1, // Corner roundness (0..1)
                rotate: 0, // The rotation offset
                color: '#FFF', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false, // Whether to use hardware acceleration
                className: 'spinner', // The CSS class to assign to the spinner
                zIndex: 2e9, // The z-index (defaults to 2000000000)
                top: 'auto', // Top position relative to parent in px
                left: 'auto' // Left position relative to parent in px
            };
        var target = document.createElement("div");
        document.body.appendChild(target);
        var spinner = new Spinner(opts).spin(target);
        overlay = iosOverlay({
            text: "Searching ...",
            spinner: spinner
        });

        return false;
    }

    function stopSpin() {
        window.setTimeout(function() {
            overlay.update({
                icon: "img/check.png",
                text: "Success!"
            });
        }, 3e3);

        window.setTimeout(function() {
            overlay.hide();
        }, 5e3);
    }

したがって、私のprocess()関数では、最初にスピナーを有効にし、データベースからデータをロードする別の関数を呼び出してから、スピナーを停止します。

function process() {
     startSpin();
     loadData();
     stopSpin();
}

このloadData()関数は非常に重いため、完了するまでに数秒かかる場合があります。

loadData()問題は、関数が終了した後にのみスピナーが表示されることです。

loadData()関数が呼び出される前にスピナーが表示されないのはなぜですか?