JS中do-while结合setTimeout引发prompt无限循环问题求助

问题描述 #

需要实现一个持续弹出的prompt窗口，让用户输入数字，直到初始值为200的machineFuel变量减至0。使用do-while循环后出现以下问题：

• 输入数字后prompt立即再次弹出，machineFuel变量无任何变化
• 修改代码后甚至出现无限循环导致浏览器崩溃
• 已知循环条件machineFuel > 0 && height > 0始终为true，不知道如何正确设置循环逻辑

原代码 #

var machineFuel = 200;
var height = 500;

setTimeout(round, 2000);

function round() {
    do {
       playerInput = input();
    } while (machineFuel > 0 && height > 0);
    calculate();
}

function input(fuel) {
    fuel = parseInt(prompt("Fuel", "A number from 0-200"));
    return fuel;
}

function calculate() {
    machineFuel = machineFuel - playerInput;
}

问题分析 #

1. 循环内未更新变量：do-while循环仅获取用户输入，但未在循环内部执行machineFuel的更新逻辑，导致循环条件machineFuel > 0始终成立，无限弹出prompt。
2. 更新逻辑时机错误：calculate()函数放在循环结束后调用，但循环永远无法退出，导致该函数从未执行。
3. 缺乏输入校验：未处理用户输入非有效数字的情况，可能导致machineFuel变为NaN，进一步破坏循环判断逻辑。

修正后的代码 #

var machineFuel = 200;
var height = 500;

setTimeout(round, 2000);

function round() {
    do {
        // 获取用户输入并校验
        var playerInput = input();
        // 仅当输入有效时才更新燃料
        if (!isNaN(playerInput) && playerInput >= 0 && playerInput <= machineFuel) {
            machineFuel -= playerInput;
            console.log(`剩余燃料：${machineFuel}`);
        } else {
            alert(`请输入0到${machineFuel}之间的有效数字`);
        }
        // 循环条件：燃料大于0且高度大于0（可根据需求调整height的逻辑）
    } while (machineFuel > 0 && height > 0);
    alert("燃料已耗尽！");
}

function input() {
    return parseInt(prompt(`当前剩余燃料：${machineFuel}\n请输入要消耗的燃料（0-${machineFuel}）`, "0"));
}

修改说明 #

• 将燃料更新逻辑移至循环内部，每次输入有效数字后立即减少machineFuel，确保循环条件能正确触发退出。
• 增加输入校验：判断输入是否为有效数字，且不超过当前剩余燃料量，避免无效输入导致逻辑错误。
• 在prompt中显示当前剩余燃料，提升用户体验。
• 移除冗余的calculate()函数，简化逻辑。

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