如何暂停脚本两次获取按钮输入？while循环执行异常求助

我完全懂你遇到的麻烦——原本没加while循环时，问答展示和按钮交互都正常，结果一加上循环，脚本直接跳到最后一个问答，根本不给你点击按钮的机会。这其实是JavaScript单线程执行机制导致的问题，我来给你拆解清楚并修复代码。

为什么while循环不行？ #

JavaScript是单线程的，同步代码（比如你的while循环）会一口气执行到底，不会等待异步事件（比如按钮点击）完成。你的循环会在瞬间把counter从0加到3，同时反复创建按钮、绑定事件——等循环跑完，浏览器才会处理点击事件，但此时counter已经是3了，所有后续的点击操作都会基于这个最终值，自然只会显示最后一个问答的内容。

修复方案：用事件驱动替代同步循环 #

我们可以把“展示问答”做成一个独立函数，每次点击Continue按钮后再触发下一次问答，用这种异步递推的方式来实现你要的分步效果。修改后的代码如下：

let counter = 0;
// 定义展示单个问答的函数
function showQuestion() {
    if (counter >= 3) {
        // 问答全部展示完后的处理（可选）
        document.getElementById('divA').innerHTML = "问答已全部完成！";
        document.getElementById('divB').innerHTML = "";
        return;
    }

    // 切换divC的显示状态
    const x = document.getElementById("divC");
    x.style.display = x.style.display === "none" ? "block" : "none";

    // 展示当前问题
    document.getElementById('divA').innerHTML = question[counter];
    // 添加"显示答案"按钮
    document.getElementById('divB').innerHTML = '<button id="myBtn">Show Answer</button>';
    // 绑定显示答案的点击事件
    document.getElementById('myBtn').addEventListener("click", function (){
        document.getElementById("divB").innerHTML = answer[counter];
        // 再次切换divC状态
        const x = document.getElementById("divC");
        x.style.display = x.style.display === "none" ? "block" : "none";
    });

    // 添加"继续"按钮
    document.getElementById('divC').innerHTML = '<button id="myBtn2">Continue</button>';
    // 绑定继续按钮的点击事件，触发下一个问答
    document.getElementById('myBtn2').addEventListener("click", function (){
        document.getElementById("divC").innerHTML = "";
        counter++;
        showQuestion(); // 递归调用，展示下一个问答
    });
}

// 初始化，展示第一个问答
showQuestion();

代码说明 #

• 移除了同步的while循环，改用showQuestion()函数负责单个问答的渲染和事件绑定
• 每次点击Continue按钮时，递增counter并递归调用showQuestion()，实现分步加载
• 增加了问答完成后的判断，避免超出数组范围
• 所有事件绑定都是基于当前的counter值，不会出现循环跑完后值不对的问题

这样修改后，脚本就会等待你点击按钮后再进行下一步，完全符合你的需求啦！

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