Question

我正在制作我自己的simon游戏版本，但是在用户按错误输入后，点击内部的回调函数不存在。结果，函数handler.patternRepeatPlayer（）被递归调用，用于数组模式的每个元素。我想在callhandler.patternRepeatPlayer只调用一次后从else中断一个解决方案。该程序在严格模式下工作正常，但只有在其他内部的非严格模式下，我无法从其他方面中断。 - 可以在Git上访问项目。 https://github.com/santosh1357/simonGame.git 流程就像来自html - ＆gt;来自PatternGen的函数simonnGame.PatternGen - ＆gt; handler.PatternRepeatPlayer - ＆gt; PatternRepPlayer - ＆gt; PatternMatcher - ＆gt; userInput（此处如果在非严格模式下用户输入错误） - ＆gt; patternRepeatPlayer 这种情况是失败的，因为在这种情况下，只有在调用该函数一次后才存在其他情况。

//有问题的功能。

userInput: function(){
        var userPattern = new Array();var id;
         $('img').click(function(){                     
                id = parseInt(this.id,10); userPattern.push(id);handler.effect(id);
                if(userPattern.indexOf(id) !== simonGame.PATTERN.indexOf(id)){ 
                    if($('.chkStrict:checked').val() === "on"){
                        var audio = new Audio('sounds/wrong.mp3');
                        audio.play();
                        setTimeout(function(){window.location.reload(true)},1000);
                    } else {
                        var audio = new Audio('sounds/wrong.mp3');
                        audio.play();
                        userPattern.length = 0;
                        handler.repeatFlag = true;
                        handler.patternRepeatPlayer(); ****//this is getting called recursivelly rather than quiting after calling once****
                        return ;
                    }
                }

//结束有问题的功能

我认为对点击回调功能的工作方式存在一些误解。

// Fullcode

var simonGame = {
    COUNT: 0,
    PATTERN: [],
    SOUND:[{file:'sounds/sa.mp3'},{file:'sounds/re.mp3'},{file:'sounds/ga.mp3'},{file:'sounds/ma.mp3'},{file:'sounds/pa.mp3'},{file:'sounds/dha.mp3'},{file:'sounds/nee.mp3'}],
    patternGen: function(){
        var randomId;
        randomId = Math.floor(Math.random() * 7);
        simonGame.PATTERN.push(randomId);
        if(simonGame.COUNT > 20){
            alert("You have won the game!!");
            window.location.reload(true);
        }
        simonGame.COUNT += 1;
        //debugger;
        //console.log("increase count true calling count display " + simonGame.COUNT);
        handler.countDisplay();
        //console.log("count gen true calling patternPlayer with PATTERN " + simonGame.PATTERN );
        handler.patternRepeatPlayer();
    }, //close patternGen
    patternMatcher: function(genPattern){
        //console.log("inside patternMatch");
        var genPattern = simonGame.patternGen;
        //setTimeout(function(){
            //console.log("PATEERN: " + simonGame.PATTERN + "COUNT " + simonGame.COUNT );
            //calling user input
            console.log("calling user Input");
            handler.userInput();
            setTimeout(function(){
                if(handler.repeatFlag === false){  //execute count gen only if repeat flag is false inside user INPUT
                    genPattern();
                }
            },simonGame.COUNT*2000);

            //console.log("pattern check true, calling pattern gen");

        //},simonGame.COUNT*5000); //c`enter code here`lose setTimeout

    }, //close patternMatcher



} //close simonGame

var handler = {
    countRepPlayer: 0,
    repeatFlag: false,
    patternRepeatPlayer: function(){
        var repeater = setInterval(function(){
                handler.effect(simonGame.PATTERN[handler.countRepPlayer]);
                handler.countRepPlayer += 1;
                if(handler.countRepPlayer > simonGame.COUNT){
                    clearInterval(repeater);
                    //setTimeout(function(){
                        simonGame.patternMatcher();
                        //},1000);
                    handler.countRepPlayer = 0;
                }
            },1000);//close sestInterval

    }, //close patternRepeatPlayer
    effect: function(id){
       var img = document.getElementById(id);
       if(img !== null && id !== undefined){
            $( img ).fadeIn(100).fadeOut(100).fadeIn(100);//fadeOut(200).fadeIn(200);
            //debugger;
            var audio = new Audio(simonGame.SOUND[id].file);
            audio.play();
            //console.log("id inside effect " + id)
        }
    },//close effect
    countDisplay: function(){
        document.getElementById("count").innerHTML = "Count: " + simonGame.COUNT;
    }, //close countIncrease
    userInput: function(){
        var userPattern = new Array();var id;
         $('img').click(function(){                     
                id = parseInt(this.id,10);
                userPattern.push(id);
                handler.effect(id);
                console.log(" user " + userPattern); 
                console.log(" pattern " + simonGame.PATTERN);
                if(userPattern.indexOf(id) !== simonGame.PATTERN.indexOf(id)){
                    console.log(" WRONG USER INPUT ");
                    if($('.chkStrict:checked').val() === "on"){
                        var audio = new Audio('sounds/wrong.mp3');
                        audio.play();
                        setTimeout(function(){window.location.reload(true)},1000);
                    } else {
                        console.log("inside else " );
                        var audio = new Audio('sounds/wrong.mp3');
                        audio.play();
                        userPattern.length = 0;
                        handler.repeatFlag = true;
                        handler.patternRepeatPlayer(); ****//this is getting called recursivelly rather than quiting after calling once**.**
                        return ;
                    }
                }
                //reset the userPattern Array
                if(userPattern.length === simonGame.PATTERN.length){
                    userPattern.length = 0;
                }
        });     //close click.

    }


} //close handler

Answer 1

是的，它将被递归调用，因为你为它设置了间隔在这里你可以修改你的代码：

patternRepeatPlayer: function(){
    var repeater = setInterval(function(){
            handler.effect(simonGame.PATTERN[handler.countRepPlayer]);
            handler.countRepPlayer += 1;
            if(handler.countRepPlayer > simonGame.COUNT){
                clearInterval(repeater);
                //setTimeout(function(){
                    simonGame.patternMatcher();
                    //},1000);
                handler.countRepPlayer = 0;
            }
        },1000);//close sestInterval

}

收件人：（已编辑）

function myCallbackFunction(repeater){
    handler.effect(simonGame.PATTERN[handler.countRepPlayer]);
    handler.countRepPlayer += 1;
    if(handler.countRepPlayer > simonGame.COUNT){
    clearInterval(repeater);
    simonGame.patternMatcher();
    handler.countRepPlayer = 0;
    }
}

patternRepeatPlayer: function(){
    var repeater = setInterval(function() {myCallbackFunction(repeater);}, 1000);
}

您需要拨打一次电话，只需拨打myCallbackFunction(repeater)

即可

如何打破Jquery点击回调函数

1 个答案: