JS代码For循环在Firefox运行正常但Chrome无法逐次更新输出问题

该差异和textContent、innerHTML的使用无关，本质是浏览器事件循环调度策略与prompt同步阻塞特性共同导致的：

• 浏览器中JS执行和页面渲染是互斥的，当前JS宏任务未执行完成前，页面不会触发重绘
• 你的代码中for循环、prompt弹窗都是同步执行逻辑，每次修改DOM内容后立刻弹出prompt，会阻塞JS线程也会阻塞后续渲染动作
• Firefox内置策略是弹出prompt前会先把已产生的DOM变更渲染到页面上，因此你可以看到每轮循环的输出；Chrome则会等待整个game()函数执行完毕、所有prompt交互完成后才统一触发重绘，因此只会显示最终状态

你可以把同步循环改成递归调用，每次修改DOM后通过setTimeout将下一轮交互放到下一个宏任务执行，给浏览器留出重绘的时间，同时修复用户点prompt取消按钮时sign为null导致的报错问题，修改后的JS代码如下：

const out0 = document.getElementById('user-choice');
const out1 = document.getElementById('computer-choice');
const out2 = document.getElementById('game-result');
const out3 = document.getElementById('user-score');
const out4 = document.getElementById('computer-score');
const out5 = document.getElementById('final-result');

const choices = ['rock', 'paper', 'scissors'];

function computerPlay() {
    const randomChoice = choices[Math.floor(Math.random() * choices.length)];
    out1.textContent = randomChoice;
    return randomChoice;
}

function playRound(playerSelection, computerSelection, userScore, computerScore, roundCount) {
    if (playerSelection == "rock" && computerSelection == choices[0]) {
        return {
            userScore,
            computerScore,
            roundCount: roundCount - 1,
            msg: "It's a tie! Play again!",
            final: null
        };
    } else if (playerSelection == "rock" && computerSelection == choices[1]) {
        computerScore += 1;
        let final = null;
        if(computerScore == 3) {
            final = "Unfortunately you lost the game :(";
        }
        return {
            userScore,
            computerScore,
            roundCount,
            msg: final ? '' : "You lose this round! Paper beats rock.",
            final
        };
    } else if (playerSelection == "rock" && computerSelection == choices[2]) {
        userScore += 1;
        let final = null;
        if(userScore == 3) {
            final = "Congratulations, you won the game!";
        }
        return {
            userScore,
            computerScore,
            roundCount,
            msg: final ? '' : "You win this round! Rock beats scissors.",
            final
        };
    } else if (playerSelection == "paper" && computerSelection == choices[0]) {
        userScore += 1;
        let final = null;
        if(userScore == 3) {
            final = "Congratulations, you won the game!";
        }
        return {
            userScore,
            computerScore,
            roundCount,
            msg: final ? '' : "You win this round! Paper beats rock.",
            final
        };
    } else if (playerSelection == "paper" && computerSelection == choices[1]) {
        return {
            userScore,
            computerScore,
            roundCount: roundCount - 1,
            msg: "It's a tie! Play again!",
            final: null
        };
    } else if (playerSelection == "paper" && computerSelection == choices[2]) {
        computerScore += 1;
        let final = null;
        if(computerScore == 3) {
            final = "Unfortunately you lost the game :(";
        }
        return {
            userScore,
            computerScore,
            roundCount,
            msg: final ? '' : "You lose this round! Scissors beat paper.",
            final
        };
    } else if (playerSelection == "scissors" && computerSelection == choices[0]) {
        computerScore += 1;
        let final = null;
        if(computerScore == 3) {
            final = "Unfortunately you lost the game :(";
        }
        return {
            userScore,
            computerScore,
            roundCount,
            msg: final ? '' : "You lose this round! Rock beats scissors.",
            final
        };
    } else if (playerSelection == "scissors" && computerSelection == choices[1]) {
        userScore += 1;
        let final = null;
        if(userScore == 3) {
            final = "Congratulations, you won the game!";
        }
        return {
            userScore,
            computerScore,
            roundCount,
            msg: final ? '' : "You win this round! Scissors beat paper.",
            final
        };
    } else if (playerSelection == "scissors" && computerSelection == choices[2]) {
        return {
            userScore,
            computerScore,
            roundCount: roundCount - 1,
            msg: "It's a tie! Play again!",
            final: null
        };
    } else {
        return {
            userScore,
            computerScore,
            roundCount: roundCount - 1,
            msg: "I think you forgot how to play this game!",
            final: null
        };
    }
}

function game(userScore = 0, computerScore = 0, roundCount = 0) {
    if (roundCount >=5) return;
    const sign = prompt("Rock, paper or scissors?");
    if (!sign) {
        setTimeout(() => game(userScore, computerScore, roundCount), 0);
        return;
    }
    const playerSelection = sign.toLowerCase();
    const computerSelection = computerPlay();
    out0.textContent = sign;
    const res = playRound(playerSelection, computerSelection, userScore, computerScore, roundCount);
    out3.textContent = res.userScore;
    out4.textContent = res.computerScore;
    out2.textContent = res.msg;
    if (res.final) {
        out5.textContent = res.final;
        return;
    }
    setTimeout(() => game(res.userScore, res.computerScore, res.roundCount + 1), 0);
}

game();

修改后Chrome和Firefox都会在每轮交互前先刷新页面内容，符合预期效果。

内容的提问来源于stack exchange，提问作者Emanuele