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，因为4毫秒通常是由于浏览器限制和html5 spec}

而可用于一次超时的最短时间

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

1 个答案: