未记录回调函数的输出（JavaScript）

我正试图通过回调来了解异步JS。在我的html中，我有一个按钮和一个div区域来显示文本

<button class="btn btn-default">Fetch User</button>
<hr>
<div></div>

我希望代码按以下顺序输出： 正在检查身份验证-->获取用户-->便士-->红色气球飘向您-->哈哈哈

但是，代码未按所需顺序输出。其输出如下所示： 正在检查身份验证-->获取用户-->红气球漂移-->哈哈哈

所以我想弄明白为什么“PENNYWISE”没有出现。任何指导都将不胜感激

导致

setText（“PENNYWISE”）

的代码是立即，然后是导致

setText（“红色气球飘向你”）的代码

声明之间没有延迟

DOM得到更新，然后立即再次更新

---

这对于重新绘制显示来说太快了，即使没有，对人眼来说也太快了。

它应该按照预期提供输出，请尝试

const setText=（text）=>{div.textContent+=text}

。这将把所有的输出连接到你的div上明白了吗。。。是的PENNYWISE'已被记录，但未显示。通过添加超时来解决此问题<代码>设置超时（（）=>setText（'Red balloon flowing your way…'），2000）

const button = document.querySelector("button");
const div = document.querySelector("div");

const setText = (text) => {
  div.textContent = text
}


const checkAuth = ca => {
  setText('Checking Auth...')
  setTimeout(() => {
    ca(true);
  }, 2000);
};

const fetchUser = fu => {
  setText('Fetching User...')
  setTimeout(() => {
    fu ({ name: "PENNYWISE" }) ;
  }, 2000);
};

const evilLaughter = el => {
  setText('Red balloon drifting your way...')
  setTimeout(() => {
    el ({ laughter: "HA HA HA" }) ;
  }, 2000);
};

button.addEventListener("click", () => {
  checkAuth(isauth => {
    if (isauth) {
      fetchUser(user => {
        setText(user.name);
          evilLaughter( intro => {
              setText(intro.laughter)
          });
      });
    }
  });
});

    setText(user.name);
      evilLaughter( intro => {
          setText(intro.laughter)
      });