同步 xm​​lHttpRequest 调用的回调何时执行？

Question

这是我的示例代码。 （我需要发送同步请求的原因是实际上我需要发送几个请求，每个请求取决于前一个请求的响应。我需要设置回调的原因是我想显示一些微调器，以便用户知道状态脚本。）

var xmlhttp =new XMLHttpRequest();
xmlhttp.onreadystatechange=function() { 
  if (xmlhttp.readyState==2) {
    document.getElementById("p2").style.color = "blue"; //statment 1
  }
  if (xmlhttp.readyState==4) {
    document.getElementById("p2").style.color = "red"; //statment 2
  }
}
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
balblabla();  // a time-cost function

然后我有 2 个问题。 首先，语句 1 和语句 2 何时真正执行？ 能保证在balblabla()之前被执行吗？

其次，即使执行了语句 1 和语句 2，在 blablabla() 完成之前，浏览器似乎也不会真正改变显示的颜色。 有没有办法在 blablabla() 完成之前显示颜色变化？ （假设 blablabla() 需要很长时间）

谢谢！

Answer 1

1. 如果 XHR 是同步的，则回调会在 .send() 返回之前执行。换句话说，在blablabla()之前。

2. 浏览器 DOM 更新是异步的。或者更确切地说，重绘是异步的（DOM 更新/重排有时可以是同步的，但它不会绘制到屏幕上，只是更新数据结构）。

因此，即使您坚持不学习如何使用同步 XMLHttpRequest 编写异步程序，您也无法同步绘制任何东西。最好异步编写所有内容。

---

注意：需要明确的是，重绘仅在 javascript 解释器没有其他可运行的情况下发生。也就是说，浏览器窗口只有在blablabla()运行完成后才会更新。

如果blablabla() 需要很长时间执行，您可以使用setTimeout() 中断循环以使其异步。或者，您可以尝试使用网络工作者。