Javascript跳过最后一个功能,忽略其他功能

Question

所以我同意用他的一个小项目帮助一个朋友.制作一个简单的游戏,人们选择一个标记行,然后加载另一个.我已经完成了布局和一些功能,但它们都非常糟糕.

当我尝试添加第三阶段时,问题就出现了.很确定我遇到了某种内存泄漏,因为一切都开始乱了.我当前的迭代试图将函数分开,但不可否认,只有一个基本的js类,我认为我只是不知道如何使这个工作.

我这里有一个小提琴.您可以在加载时看到它直接跳到第3阶段,即使这样也无法正常工作.我相信它编码为正确的答案"摇滚"闪烁绿色,但它仍然闪烁红色.

function resetFrame1 (){

    $('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
    callback();

}

function resetFrame2 (){

    $('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
    callback();
}

function end(){
    //right now undefined since I can't get this to work at all.



}





function stageOne(){

    var score = 0;

    $('#leftText').text("Green Living. . . . . Easy!!!")

    $('#leftImage').html("<img src=>");

    $('#rightText').text("Burn Your Tires!");

    $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            score++;
            $('#leftSide').css( "background-color", "green");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame1();
            });
        }   
        else if (e.which==76 || e.which==108){
            $('#rightSide').css( "background-color", "red");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame1();
            });
        }   
    });

}   

function stageTwo(){


        $('#leftText').text("Keep your lights on. It prevents home invasion.")

        $('#leftImage').html("<img src=>");

        $('#rightText').text("The earth needs YOU!");

        $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            $('#leftSide').css( "background-color", "red");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame2();
            });
        }   
        else if (e.which==76 || e.which==108){

            score++;
            $('#rightSide').css( "background-color", "green");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame2();
            });
        }   
    }); 
}   


function stageThree(){


        $('#leftText').text("Organic Farms are Terrorists")

        $('#leftImage').html("<img src=>");

        $('#rightText').text("Environmental Activism is the new Rock&Roll.");

        $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            $('#leftSide').css( "background-color", "red");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    end();
            });
        }   
        else if (e.which==76 || e.which==108){

            score++;
            $('#rightSide').css( "background-color", "green");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    end();
            });
        }   
    }); 
}   




$(document).ready(function(){

    stageOne(); 

    stageTwo();

    stageThree();1

}); 

的jsfiddle

我继续添加我正在使用的js文件,以便允许链接到jsfiddle.

谢谢大家的帮助.请记住,正如我试图帮助我的朋友一样,"没有好事不受惩罚".

Answer 1

您在文档就绪功能内一个接一个地调用这些函数.如果你想让它们逐步显示,请调用stageOne(),然后有一些逻辑可以前进到第二阶段(通过调用stageTwo函数)或某些导航来在各个级别之间来回传递.因为stageThree最后被调用,所以这就是它被执行和渲染的原因.