在完成按钮处理程序之前更改 javascript 元素

Question

我想在按钮处理程序运行时更改段落的内容，而不是等待按钮处理程序完成。这是我的代码：

Output: <p id="output"></p><br><br>
<input type="button" onclick="buttonPressed()" value="submit" id="button"><br><br>

<script>

    function buttonPressed(){
        console.log("output 2")
        document.getElementById("output").innerHTML = "output 1"

        while (true){
            // doing something that takes a long time
        }

    }

    console.log("output 1")
    document.getElementById("output").innerHTML = "output 1"

</script>

按下按钮后，我希望输出读取“输出 2”，而不必等待按钮处理程序完成。我在按钮处理程序中有一段时间来证明这一点，实际上我不会有一段时间，而是某种需要一段时间的过程。我想让用户知道这个过程已经开始，他们应该等待它完成。

感谢您的帮助

Answer 1

您的输出未显示的原因是浏览器线程正忙于执行当前任务（您的函数）。因此，浏览器无法重绘显示更新输出的页面。

为了解决这个问题，您需要使用两个单独的任务。实现此目的的一种方法是在超时时间内简单地运行长时间运行的代码。

function buttonPressed(){
    console.log("output 2")
    writeOutput("output 2")

    setTimeout(function(){ //use a separate task and allow the page to draw
        while (true){
            // doing something that takes a long time
        }
    },4);
}

_{附带说明，这里使用 4 是因为由于浏览器限制和 html5 spec}

，4 毫秒通常是您可以用于一次超时的最短时间