分配给onreadystatechange的方法如何快速执行？

Question

在下面的示例中，如果单击按钮，它将立即更改内容。我想知道为什么没有像我要重新加载页面那样的延迟。因为从代码中看来，直到我单击按钮，loadDoc（）才开始运行。此时，代码从服务器请求信息并进行更改。但这似乎是瞬间发生的，没有延迟。单击前是否运行loadDoc函数，以便单击时已经具有responseText？

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>