jquery - 別の関数が終了したときに別の関数を実行する

Question

JSON ファイルから HTML 構造にコンテンツを読み込んでいます。HTML が表示される前に JSON コンテンツが読み込まれるまで待ちたいのですが、このコード行を実行する方法はあり$('#wrapper').animate({opacity:1});ますloadContent();か?

$('#mch-overlay-content').load('layer_already.html', function() {
    loadContent();
    $('#wrapper').animate({opacity:1});
});

function loadContent(){ 
    $.ajax({
        url: "json/" + language + "/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        cache : false,
        contentType: "application/json",
        dataType: "json",
        success: function(source){
            data = source;
            showStartpage(data);
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 
}

function showStartpage(){
    $("#game-logo a").addClass(language);
    $(".start .text3").html(data[language]['startpage']['text3']);
    $(".start .text4").html(data[language]['startpage']['text4']);
    $(".start .text5").html(data[language]['startpage']['text5']);
    $(".start .text6").html(data[language]['startpage']['text6']);
    $(".start .text7").html(data[language]['startpage']['text7']);
}

Answer 1

successコードをコールバックに追加します。

success: function(source){
    data = source;
    showStartpage(data);
    $('#wrapper').animate({opacity:1});
},

Answer 2

$('#mch-overlay-content').load('layer_already.html', function() {
        loadContent(function() {
            $('#wrapper').animate({opacity:1});
        });
});

 function loadContent(callback){ 
        $.ajax({
            url: "json/" + language + "/content.json",
            data: "nocache=" + Math.random(),
            type: "GET",
            cache : false,
            contentType: "application/json",
            dataType: "json",
            success: function(source){
                data = source;
                showStartpage(data);
                callback();
            },
            error: function(data){
                alert("Failed to load content");
            }
        }); 



    }

    function showStartpage(){
            $("#game-logo a").addClass(language);
            $(".start .text3").html(data[language]['startpage']['text3']);
            $(".start .text4").html(data[language]['startpage']['text4']);
            $(".start .text5").html(data[language]['startpage']['text5']);
            $(".start .text6").html(data[language]['startpage']['text6']);
            $(".start .text7").html(data[language]['startpage']['text7']);
    }

Answer 3

これには deferreds を使用できます。

$('#mch-overlay-content').load('layer_already.html', function() {
    var dfd = loadContent();
    dfd.done(function(){
        $('#wrapper').animate({opacity:1});
    });
});

function loadContent(){ 
    return $.ajax({
        url: "json/" + language + "/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        cache : false,
        contentType: "application/json",
        dataType: "json",
        success: function(source){
            data = source;
            showStartpage(data);
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 
}

もちろん、アニメーションを直接成功コールバックに入れる可能性がない場合

Answer 4

もちろん！ラッパー アニメーションをajax success関数の最後に配置します。

function loadContent()
{ 
    $.ajax(
    {
        url: "json/" + language + "/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        cache : false,
        contentType: "application/json",
        dataType: "json",
        success: function(source)
        {
            data = source;
            showStartpage(data);
            $('#wrapper').animate({opacity:1}); // <- place it here
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 
}