ブートキャンプ中に宿題として作成しているクイズアプリのカウントダウンタイマーに取り組んでいます。現在、startQuiz（）内のsetInterval関数が0に達すると、間隔をクリアすることになっていることを除いて、レンダリング時にすべてが正しく機能しています。ただし、ドキュメントに書き込まれたinnerHTMLは、カウントダウンがまだ実行されているかのように瞬間的に点滅し続けます。おそらく間違った場所でのリターンだと思いますが、スクリプト全体でリターンを加算、減算、移動しようとしましたが、解決策がどこにあるのかわかりません。
var startButton = document.querySelector("#startButton");
var time = document.querySelector("#time");
var countdown = document.querySelector("#countdown");
var timeLeft;
var userScore;
startButton.addEventListener("click", startTimer);
function startTimer() {
var startCount = 5;
setInterval(function(){
if(startCount <= 0) {
clearInterval(startCount=0);
startQuiz();
}
countdown.innerHTML = startCount;
startCount -=1;
}, 1000);
return;
}
function startQuiz() {
timeLeft = 10;
quizQuestions();
setInterval(function(){
if(timeLeft <= 0) {
clearInterval(timeLeft=0);
gameOver();
}
time.innerHTML = timeLeft;
timeLeft -=1;
}, 1000)
return;
}
function gameOver() {
document.getElementById("quizQuestion").innerHTML = "GAME OVER";
return;
}
function quizQuestions() {
document.getElementById("quizQuestion").innerHTML = questionA.question;
return;
}
これがこれまでのスクリプト全体です。questionAは複数のキーと値のペアを持つオブジェクトであり、問題とは関係がないため、questionAのvar定義のみを省略したため、スペースを節約するために省略しました。startTimer（）関数は、ゲームを開始するための個別のカウントダウンタイマーとして適切に機能しますが、何らかの方法でstartQuiz（）関数に干渉する場合に備えて、コードに含めました。
setInterval間隔識別のためにintergerを返します。間隔をクリアするには、この整数を使用する必要があります。
var intervalId = setInterval(function(){
if(timeLeft <= 0) {
clearInterval(intervalId);
gameOver();
}
time.innerHTML = timeLeft;
timeLeft -=1;
}, 1000);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加