如何在主函数执行前完成含setTimeout循环的子函数？

兄弟，我太懂这种卡在校验时序上的痛苦了！连续熬夜调异步逻辑真的头大，咱们一步步把这个掷骰子的时序问题捋清楚。

首先，先明确你需求里的核心时序逻辑：

• 点击按钮 → 启动动画 → 依次展示N次随机骰子数 → 停止动画并展示最终稳定值

之前的问题大概率出在setTimeout的异步特性上——如果直接循环创建多个setTimeout，它们会几乎同时触发，根本达不到“依次展示”的效果；或者动画和数值展示的时序没对齐，导致视觉和逻辑脱节。

下面是我整理的完整可运行方案，用async/await来严格控制时序，彻底解决混乱问题：

完整代码实现 #

HTML部分（补全并添加基础样式） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>骰子模拟器</title>
    <style>
        .dice {
            width: 100px;
            height: 100px;
            border: 2px solid #333;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            font-weight: bold;
            margin: 20px 0;
            background: #fff;
        }
        /* 滚动动画效果 */
        .rolling {
            animation: shake 0.2s infinite;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
    </style>
</head>
<body>
    <button id="rollBtn">掷骰子</button>
    <div id="dice" class="dice"></div>
    <script>
        // JS逻辑写在这里
    </script>
</body>
</html>

JavaScript部分（时序严格控制） #

const rollBtn = document.getElementById('rollBtn');
const diceEl = document.getElementById('dice');
const ROLL_TIMES = 5; // 要依次展示的随机次数
const INTERVAL = 200; // 每次展示的间隔时间（毫秒）

// 生成1-6的随机骰子数
function getRandomDice() {
    return Math.floor(Math.random() * 6) + 1;
}

// 异步展示单次骰子结果，等待指定间隔后返回当前数值
async function showSingleRoll() {
    const num = getRandomDice();
    diceEl.textContent = num;
    await new Promise(resolve => setTimeout(resolve, INTERVAL));
    return num;
}

// 完整掷骰子流程，用async/await确保时序正确
async function rollDice() {
    // 1. 禁用按钮，防止重复点击触发多个异步流程
    rollBtn.disabled = true;
    // 2. 启动滚动动画
    diceEl.classList.add('rolling');
    
    // 3. 循环展示指定次数的随机结果，确保上一次完成后再进行下一次
    let finalNum;
    for (let i = 0; i < ROLL_TIMES; i++) {
        finalNum = await showSingleRoll();
    }
    
    // 4. 停止动画，展示最终稳定值
    diceEl.classList.remove('rolling');
    diceEl.textContent = `最终结果：${finalNum}`;
    // 5. 重新启用按钮
    rollBtn.disabled = false;
}

// 绑定按钮点击事件
rollBtn.addEventListener('click', rollDice);

关键时序控制要点 #

• 用async/await替代嵌套setTimeout：让异步逻辑像同步代码一样线性执行，彻底避免回调地狱和时序混乱
• 禁用按钮防重复触发：防止用户快速点击导致多个异步流程同时运行，打乱展示顺序
• 动画与逻辑严格绑定：动画在流程开始时启动，所有随机数展示完成后才停止，确保视觉和逻辑完全同步
• 单次展示等待间隔：每次展示随机数后等待指定时间，确保用户能看到每一次的变化，而不是瞬间跳变

可选调整点 #

• 如果需要最终稳定值和中间展示的随机数无关，可以把finalNum改成单独生成：finalNum = getRandomDice()
• 可以调整ROLL_TIMES和INTERVAL参数，适配不同的动画时长和展示需求

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