如何从javascript中删除异步？ [重复]

Question

这个问题在这里已有答案：

• Force browser to immediately repaint a dom element 1回答
• How to force repaint in JS? 3回答

对于一般性的问题，我很抱歉，但我真的希望能够处理这个问题。

我习惯于编写实时Java或PHP语言，程序逐行执行，但有时我会使用javascript，因为它有很好的库。

异步的东西让我疯狂。

document.body.innerHTML = "";
for(var i=0;i<3;i++){
    document.body.innerHTML+="Hi! ";
    alert();
}

我希望这段代码能够像这样工作：

1. 删除“body”标记的全部内容。
2. 打印“嗨！”
3. 调用警报。
4. 打印“嗨！”。
5. 调用警报
6. 打印“嗨！”。
7. 调用警报。

实际上它的工作原理如下：

1. 调用警报
2. 调用警报
3. 调用警报
4. 删除“body标签”的全部内容。
5. 打印“嗨！”。
6. 打印“嗨！”。
7. 打印“嗨！”。

如何让javascript代码表现得像普通程序？

谢谢！

更新：

第一个重复的建议根本不重复。它有完全不同的代码（我甚至不使用setTimeout），不同的任务和不同的解释。即使我的问题的答案隐藏在某处（在评论号56或类似的东西），它是如此不清楚，不应被视为重复。

第二个重复建议中选定的解决方案根本不起作用：

function b(){
    document.body.innerHTML = ""; for(var i=0;i<3;i++){ 
        document.body.innerHTML+="Hi! ";
        alert();
    }
}
function c(){
    setTimeout(b, 1);
};
c();

所以不，这些链接中的任何一个都是重复的。

Answer 1

你可以尝试这样的事情：

document.body.innerHTML = "";

function update() {
  document.body.innerHTML += "Hi! ";
  alert();
}
for (var i = 0; i < 3; i++) {
  setTimeout(update, 0);
}

编辑：有点难看，但这应该做的工作

let i = 0;
document.body.innerHTML = "";
requestAnimationFrame(function next() {
  document.body.innerHTML += "Hi! ";
  i++;
  setTimeout(function() {
    alert();
    if (i < 3) {
      requestAnimationFrame(next);
    }
  }, 0)
})