Odds/Evens奇偶游戏JavaScript代码回合间value属性无法更新问题

问题根源 #

浏览器的JavaScript执行和DOM页面渲染共用同一主线程，同步代码运行期间所有DOM更新操作都会被暂存，不会立刻渲染到页面上。你现在的代码使用while循环+prompt()弹窗的写法都是同步阻塞任务，会持续占用主线程，直到循环结束、胜负判定完成后主线程空闲，才会把之前积压的所有DOM更新一次性渲染出来，自然看不到每回合的数值变化。

修复方案 #

把阻塞式的循环逻辑改为异步逐轮触发的写法即可，修改后参考代码如下：

"use strict";
var $ = function(id) { return document.getElementById(id); };
// 全局存储当前回合累计分数
var odd = 0, even = 0;

var getRandomNumber = function(max) {
    var random;
    if (!isNaN(max)) {
        random = Math.random(); //value >= 0.0 and < 1.0
        random = Math.floor(random * max); //value is an integer between 0 and max - 1
        random = random + 1; //value is an integer between 1 and max
    }
    return random;
};

// 单轮游戏逻辑封装
var playRound = function() {
    // 先判定是否达到结束条件
    if (odd >= 50 || even >=50) {
        if (odd >= 50) { $("message").firstChild.nodeValue = "你赢了！"; }
        else if (even >= 50) { $("message").firstChild.nodeValue = "你输了:"; }
        $("play").focus();
        return;
    }
    // 获取双方出数
    var computer = getRandomNumber(5);
    var player = parseInt(prompt("请输入1-5之间的数字，输入999退出游戏", 999));
    
    if (player === 999) {
        resetFields();
        $("message").firstChild.nodeValue = "你已退出游戏";
        $("play").focus();
        return;
    }
    if (!isNaN(player) && player <=5 && player >=1) {
        // 更新页面数值，本轮逻辑执行完主线程空闲时会立刻渲染
        $("player").value = player;
        $("computer").value = computer;
        var total = player + computer;
        if (total % 2 === 0) {
            even += total;
            $("even").value = even;
        } else {
            odd += total;
            $("odd").value = odd;
        }
    }
    // 异步触发下一轮，给DOM预留渲染时间
    setTimeout(playRound, 0);
}

var playGame = function() {
    // 开局重置分数
    odd = 0;
    even = 0;
    resetFields();
    // 启动第一轮
    playRound();
};

var resetFields = function() {
    $("player").value = "0";
    $("computer").value = "0";
    $("odd").value = "0";
    $("even").value = "0";
    if($("message").firstChild) $("message").firstChild.nodeValue = "";
};

window.onload = function() {
    $("play").onclick = playGame;
    $("play").focus();
};

改动说明 #

• 删除原有阻塞主线程的while循环，把每回合的逻辑封装为单独的playRound函数
• 通过setTimeout(playRound, 0)异步触发下一轮，执行间隙浏览器会完成DOM渲染，即可正常看到每回合的数值更新
• 把原循环内的局内分数变量提升到全局，用于保存每轮的累计分数
• 补充了输入值的合法性判断，避免输入小于1的无效值导致逻辑异常
• 优化了提示文本的中文翻译

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