如何突破jquery點擊回調函數

Question

我正在製作我自己的simon Game版本，但點擊後的回調函數在用戶按錯輸入後不存在。因此函數handler.patternRepeatPlayer（）會針對數組模式的每個元素遞歸調用。我想要一個解決方案在調用handler.patternRepeatPlayer之後從else中斷。該程序在嚴格模式下工作正常，但只有在非嚴格模式內，否則我無法打破。 - 可以訪問Git上的項目。 https://github.com/santosh1357/simonGame.git 流就像是從HTML - 從PatternGen>功能simonnGame.PatternGen - > handler.PatternRepeatPlayer - > PatternRepPlayer - > PatternMatcher - > userInput（這裏如果在非嚴格模式錯誤的用戶輸入） - > 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 ; 
        } 
       } 

//結束有問題的Functiom

我覺得這是對如何點擊回調函數工作的一些誤解。

// 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)