功能性:
尝试使用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);" />
答案 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。