JavaScript - innerHTMLはsetIntervalで独立して実行されません

Question

これは私の最初のJSの質問です。私はこの関数をsetIntervalの中に持っています。だから、この機能は繰り返されます。

function chooseAnswer() { 
correct.onclick = function() { 
    if (range == 0) { 
     score++; 
     isGameOver = false; 
    } 
    else { 
     isGameOver = true; 
    } 
} 

incorrect.onclick = function() { 
    if (range != 0) { 
     score++; 
     isGameOver = false; 
    } 
    else { 
     isGameOver = true; 
    } 
} 

// Display score 
displayScore.innerHTML = score; 
} 

onlickが実行された後すぐにスコア（innerHTML）が更新されない点を除いて、すべてが完全に機能します。更新する次のラウンドの時間間隔まで待つ。私は

displayScore.innerHTML = score; 

を移動し、右

if文のいずれかで

score++; 

後にそれを置く場合onlickがトリガされた後しかし、スコアがすぐに更新します。なぜこれが起こるのですか？この関数はsetIntervalに関係なく独立して機能しませんか？つまり、行単位で実行するため、すぐに更新されるため、次回まで待つ必要はありません。

Answer 1

これは、より多くのコメントですが、それは長いにあるので、私はそれをここに書きます：

これは、ループ内でcontinueとは関係ありません。 chooseAnswerが呼び出された場合は、手動であってもsetIntervalであっても問題ありません。そして、3つの文が実行されます。

1. コールバックの割り当て
2. コールバック自体がちょうどその時にonclickに格納されているincorrect.onclick
3. displayScore.innerHTML = score;

へのコールバックの割り当てcorrect.onclickにしかし、その時点では実行/評価されません。 correctまたはincorrectをクリックしたときにのみ、ブラウザはコールバックがonclickに格納されているかどうかをチェックし、コールバックがある場合は実行されます。しかし、このコールバックは、このコードが含まれています。

function() { 
    if (range == 0) { 
    score++; 
    isGameOver = false; 
    } else { 
    isGameOver = true; 
    } 
} 

次のコードは、あなたと同じですが、別の構造で、より理解しやすいかもしれません：それは上書きしても意味がありませんさらに

function correctCallback() { 
    if (range == 0) { 
    score++; 
    isGameOver = false; 
    } else { 
    isGameOver = true; 
    } 
} 

function incorrectCallback() { 
    if (range != 0) { 
    score++; 
    isGameOver = false; 
    } else { 
    isGameOver = true; 
    } 
} 

function chooseAnswer() { 
    correct.onclick = correctCallback; //correctCallback is not call but just assigned to correct.onclick 
    incorrect.onclick = incorrectCallback; //incorrectCallback is not call but just assigned to correct.onclick 

    // Display score 
    displayScore.innerHTML = score; 
} 

よりonclickを何度も何度も繰り返します。