コールバック関数の出力がログに記録されない（JavaScript）

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の順に出力するコードが期待しますway - > HA HA HA

ただし、コードが目的の順序で出力されていません。次のように出力されます： 認証を確認しています - >ユーザーを取得しています - >赤い風船があなたの道を漂っています - > HA HA HA

私はなぜ「ペニーウィズ」が表示されないのかを考えようとしています。どんな指導も高く評価されます。

Answer 1

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

setText("PENNYWISE")につながるコードはsetText("Red balloon drifting your way")につながるコード続い直ちにあります。

ステートメント間に遅延はありません。

DOMが更新された後、すぐに再び更新されます。

これはディスプレイが再描画されるには速すぎるものであり、そうでない場合でも人間の目で見ると速すぎるものです。