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; 
} 

Все работает отлично, за исключением оценки (innerHTML) не обновляется сразу после того, как onlick срабатывает. Он ждет до следующего раунда интервала времени для обновления. Однако, если я перееду

displayScore.innerHTML = score; 

и поставить его сразу после

score++; 

в любом из, если заявление, счет будет обновляться сразу после того, как onlick срабатывает. Почему это происходит? Не работает ли эта функция независимо от setInterval? То есть, это линия выполняет по линии, так что

displayScore.innerHTML = score; 

обновит сразу же, не придется ждать до следующего раунда.

Answer 1

Это больше комментарий, но потому что это долго я буду писать здесь:

Это не связано с continue в цикле. Когда вызывается chooseAnswer, независимо от того, вручную или по setInterval. Затем три инструкции выполняются:

1. назначение обратного вызова для correct.onclick
2. назначение обратного вызова для incorrect.onclick
3. displayScore.innerHTML = score;

Сами обратные вызовы только хранятся в 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 в интервале снова и снова.