遇到“Uncaught RangeError:超出最大调用堆栈大小”

时间:2016-11-21 10:27:45

标签: javascript jquery

功能性:

尝试使用5次尝试创建测验,其中每个问题页面都是从每个类别显示的随机问题。

因此,如果用户得到每个问题都是正确的,那么下一个问题就会消失,如果用户在5次尝试中的3次中得到3个问题,他们将被导航到gameWin页面。否则,如果用户已经耗尽了所有5次尝试,则会将用户导航到GameOver页面。

问题:

此时,在用户耗尽所有5次尝试后,我的console.log中显示以下错误消息:=>未捕获RangeError:超出最大调用堆栈大小。

我想请求帮助解决如何在超出调用堆栈大小时纠正以下问题。

代码:

function showQuestion() {

  //Question list shown is more than 5, show game over
  if (GamePage_question_list.length > 5) {
    GameOver();
  } else {

    //Randomise Each Category Questions

    //Randomise Category_A Question
    random_Question_CategoryA = Math.floor(Math.random() * CategoryA_Questions.length);

    //Randomise Category_B Question
    random_Question_CategoryB = Math.floor(Math.random() * CategoryB_Questions.length);

    //Randomise Category_C Question
    random_Question_CategoryC = Math.floor(Math.random() * CategoryC_Questions.length);

    //Randomise Category_D Question
    random_Question_CategoryD = Math.floor(Math.random() * CategoryD_Questions.length);

    //Display random question
    random_Question = Math.floor(Math.random() * GameQuestion.length);

    var exist = false;

    for (i = 0; i < GamePage_question_list.length; i++) {
      if (GamePage_question_list[i] == (random_Question_CategoryA + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryB + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryC + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryD + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question + "")) {
        exist = true;
      }
    }

    Game_wait = false;

    if (exist == false) {

      //Display Question from each category after each question has been answered
      if (GamePage_question_list.length == 0) {

        console.log("Questions:" + CategoryA_Questions[random_Question_CategoryA]);


        GamePage_question_list.push(random_Question_CategoryA + "");

        $("#GamePage_question").html(CategoryA_Questions[random_Question_CategoryA]);

        answerList = CategoryA_Answers[random_Question_CategoryA];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

        console.log("Answers:" + answerList);

      } else if (GamePage_question_list.length == 1) {

        GamePage_question_list.push(random_Question_CategoryB + "");

        $("#GamePage_question").html(CategoryB_Questions[random_Question_CategoryB]);

        answerList = CategoryB_Answers[random_Question_CategoryB];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 2) {

        GamePage_question_list.push(random_Question_CategoryC + "");

        $("#GamePage_question").html(CategoryC_Questions[random_Question_CategoryC]);

        answerList = CategoryC_Answers[random_Question_CategoryC];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 3) {

        GamePage_question_list.push(random_Question_CategoryD + "");

        $("#GamePage_question").html(CategoryD_Questions[random_Question_CategoryD]);

        answerList = CategoryD_Answers[random_Question_CategoryD];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 4) {

        GamePage_question_list.push(random_Question + "");

        $("#GamePage_question").html(GameQuestion[random_Question]);

        answerList = GameAnswer[random_Question];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);
      }
    } else {
      showQuestion();
    }
  }
}


function select_answer(flag) {

  if (Game_wait == false) {
    Game_wait = true;

    var currentQuestionIndex = GamePage_question_list[GamePage_question_list.length - 1];

    var CategoryA_correctAnswer = CategoryA_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryA_POPUP_Answer = CategoryA_PopUpAnswers[parseInt(currentQuestionIndex)];


    var CategoryB_correctAnswer = CategoryB_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryB_POPUP_Answer = CategoryB_PopUpAnswers[parseInt(currentQuestionIndex)];

    var CategoryC_correctAnswer = CategoryC_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryC_POPUP_Answer = CategoryC_PopUpAnswers[parseInt(currentQuestionIndex)];

    var CategoryD_correctAnswer = CategoryD_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryD_POPUP_Answer = CategoryD_PopUpAnswers[parseInt(currentQuestionIndex)];

    var correctAnswer = GameCorrectAnswer[parseInt(currentQuestionIndex)];
    var POPUP_Answer = GamePopUpAnswer[parseInt(currentQuestionIndex)];

    console.log("flag_answer chosen:" + flag);


    //Show the POPUP Correct answer
    //THIS IS THE PART WHERE THE CORRECT ANSWER WILL SHOW IF THE USER ANSWERS EACH QUESTION WRONGLY

    if (GamePage_question_list.length == 1) {

      console.log("CategoryA_correctAnswer" + CategoryA_correctAnswer);
      console.log("A");

    } else if (GamePage_question_list.length == 2) {

      console.log("CategoryB_correctAnswer" + CategoryB_correctAnswer);
      console.log("B");

    } else if (GamePage_question_list.length == 3) {

      console.log("CategoryC_correctAnswer" + CategoryC_correctAnswer);
      console.log("C");

    } else if (GamePage_question_list.length == 4) {

      console.log("CategoryD_correctAnswer" + CategoryD_correctAnswer);
      console.log("D");

    } else if (GamePage_question_list.length == 5) {

      console.log("GameCorrectAnswer" + GameCorrectAnswer);
      console.log("E");
    }


  }
}


function GameOver() {
  idleTime = 0;

  console.log("GameOver");

  setTimeout(function() {
    location.reload();
  }, 5000);
}
<!-- Original Question -->
<div id="GamePage_question" style="position:absolute; z-index:99; top:460px; left:160px; margin:auto; color:#FFFFFF; font-size:60px; font-family: Calibrib; width:800px; text-align: center;"></div>

<!-- Answer-Original-Choice List -->
<img id="GamePageAnswer_1" style="position:absolute; z-index:3; top:1100px; left:260px; margin:auto;" />
<img id="GamePageAnswer_2" style="position:absolute; z-index:3; top:1300px; left:260px;" />

<!-- Selection answer -->
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:4; top:1100px; left:0px; margin:auto; width:1080px; height:150px; border:1;" onclick="select_answer(1);" />
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:4; top:1300px; left:0px; margin:auto; border:1; width:1080px; height:150px;" onclick="select_answer(2);" />

1 个答案:

答案 0 :(得分:3)

我基本上猜测这里的else子句&gt; if (exist == false)导致对showQuestion的同一无限调用(由@JonasGrumann评论),而exist是除false之外的值(由@Reddy评论,调用循环导致此RangeError)。 GamePage_question_list永远不会达到@FK82评论的第六个长度,因此if的{​​{1}}子句永远不会执行,而是else子句,其中if (GamePage_question_list.length > 5)永远被重新调用showQuestion的else子句(我认为if (exist == false)长度应该更加程序化:5)。

基本解决方案是更新此4条件,其中大于运算符可以是GamePage_question_list.length > 5,或>=可以是5,检查长度getter是否返回值大于/等于/等于5。