Question

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

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

我的JS如下：

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)
          });
      });
    }
  });
});

我希望代码以foll序列输出：检查验证 - ＆gt;获取用户 - ＆gt; PENNYWISE - ＆gt;红色气球飘过你的方式 - ＆gt;哈哈哈

但是，代码未按所需顺序输出。输出如下：检查验证 - ＆gt;获取用户 - ＆gt;红色气球飘过你的方式 - ＆gt;哈哈哈

所以我想弄清楚为什么“PENNYWISE”没有显示出来。任何指导都将不胜感激。

Answer 1

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

导致setText("PENNYWISE")的代码立即，后跟导致setText("Red balloon drifting your way")的代码。

声明之间没有延迟。

DOM会更新，然后会立即再次更新。

对于显示器的重新绘制来说太快了，即使不是这样，人眼看到它也会太快。

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

1 个答案: