javascript - 经历 "Uncaught RangeError: Maximum call stack size exceeded"

Question

功能:

我正在尝试创建一个有 5 次尝试的测验，其中每个问题页面都是从每个类别中显示的随机问题。

因此，如果用户答对了每个问题，下一个问题将淡入，如果用户在 5 次尝试中有 3 次答对了 3 个问题，他们将被导航到 gameWin 页面。否则，如果用户已完成所有 5 次尝试，它会将用户导航到 GameOver 页面。

问题:

此时，在用户完成所有 5 次尝试后，以下错误消息显示在我的 console.log 中 => Uncaught RangeError: Maximum call stack size exceeded.

我想寻求帮助，以解决以下有关超出调用堆栈大小的问题。

代码:

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

Answer 1

我基本上猜测这里的 else 子句> if (exist == false) 导致对 showQuestion 的相同无限调用(如@JonasGrumann 所评论)而 exist 是除 false 之外的值(正如@Reddy 评论的那样，调用循环导致此 RangeError)。 GamePage_question_list 永远不会达到@FK82 评论的第六个长度，因此 if (GamePage_question_list.length > 5) 的 if 子句永远不会执行，但是else 子句，其中 showQuestion 在 if (exist == false) 的 else 子句中永远被调用(我认为 5 长度应该在此处更具编程性:4)。

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