循环块 DOM 操作

Question

我有一个简单的计数循环，计数到 10000 并将每个数字记录到控制台。 在我开始循环之前，我想在我的 html 中将“TEST”写入正文。 尽管我在开始循环之前执行此操作，但它仅在循环完成后才将“TEST”附加到正文中。 但是，我可以在开始循环之前将某些内容记录到控制台。 我想我正在阻塞浏览器线程或其他东西，我不知道如何以非阻塞方式编写它。 很长一段时间以来，我一直试图弄清楚这个问题。 您的帮助将不胜感激！！！

我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="myfunc()">click me</button>

</body>
<script src="index.js"></script>
</html>

我的 javascript 代码：

function myfunc() {
    var h1 = document.createElement("h1").innerText = "TEST"
    document.body.appendChild(h1) //appends only after loop is done
    console.log("test") // this works
    for (var i = 0; i < 10000; i++){
        console.log(i)
    }
}

Answer 1

一种解决方案是将循环代码置于timeout状态并将延迟设置为 1 毫秒

 function myfunc() { var h1 = document.createElement("h1") h1.innerText = "TEST" document.body.appendChild(h1) //appends before the loop console.log("test") // this works setTimeout(()=>{ for (var i = 0; i < 10000; i++){ console.log(i) } },1) }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <button onclick="myfunc()">click me</button> </body> <script src="index.js"></script> </html>

循环块 DOM 操作

问题描述

1 个解决方案

解决方案1
0 2022-09-01 22:40:46

循环块 DOM 操作

问题描述

1 个解决方案

解决方案1 0 2022-09-01 22:40:46

解决方案1
0 2022-09-01 22:40:46