我有以下JavaScript。附带的代码是相当复杂的自动生成的JavaScript的极其简化的版本，该JavaScript在许多对象上启动相同的功能（不是循环的，而是生成的一堆函数调用）。
问题在于代码应该在每次启动函数时更新一个元素。但是，这不会发生。相反，当我按下按钮时，它只会冻结并更新所有状态（执行“完成”）后才能更新状态。那么，为什么long_function()在以下代码的每次调用中未更新该元素（以及如何解决该问题）：
<html>
<body>
<h1 id="status">Not yet started</h1>
<button onclick="perform()"> Start! </button>
<script type="text/javascript">
function sleepFor( sleepDuration ){
var now = new Date().getTime();
while(new Date().getTime() < now + sleepDuration){ /* do nothing */ }
}
function long_function(number)
{
document.getElementById("status").innerHTML = number;
sleepFor(1000);
}
function perform(number) {
long_function(1);
long_function(2);
document.getElementById("status").innerHTML = "Done";
}
</script>
</body>
</html>
（问题发生在Google Chrome和Safari中）
（睡眠功能摘自对sleep（）的JavaScript版本是什么的回答？）
这就是我理解发生的情况的方式：
perform()运行，并且它long_function(1)首先调用。innerHTML呼叫被发送。sleepFor(1000)函数被调用，但浏览器尚未呈现innerHTML更改。while循环运行，该循环本质sleepFor()上是阻塞的（它停止了其他JavaScript代码的运行，但也阻止了浏览器的呈现）。while循环完成，JavaScript的进行设置innerHTML你的元素来“完成”，但它从来没有得到呈现number在long_function()。如果您想对事件循环（阻塞和非阻塞JavaScript）进行有趣的观察，请参考以下资源：
这个问题由于标题（innerHTML实际上不是异步运行）而有点误导，但答案很有趣：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句