アラートとレンダリング

問題の状況

まず、次のコードを読みましょう.

// 버튼의 클릭수
let clickCnt = 2;

$button.addEventListener('click', (e) => {
  // 버튼의 스타일을 변형하는 코드
  if ($button.style.textDecoration === 'line-through') {
    $button.style.textDecoration = '';
  } else {
    $button.style.textDecoration = 'line-through';
  }
    
  clickCnt++;
  //세번 클릭시 alert창 표시  
  if(clickCnt % 3 === 0) {
    alert('3번째 클릭!');
  }
})

ボタンをクリックするとイベントハンドラが呼び出され、ボタンのスタイルを変更するとalertが表示されます.(ボタン->スタイルの変換->alertウィンドウをクリックして表示)
でも、
実際には、ブラウザウィンドウでボタンを表示する場合は、ボタンのスタイルを変更する前にalertウィンドウが表示され、ボタンのスタイルを変更する前にウィンドウを閉じる必要があります.
実際に何が起こったのかを見てみましょう.
まず、開発者ツールを開き、ブラウザで何が起こっているのかを確認します.
次の写真を見て

上図から順に見ると、「click」イベントが発生したときにイベントハンドラが呼び出され、alertが呼び出されるのがわかります.最初の赤い線の前後で時間を表示すると、alert呼び出し後、ブラウザは動作を停止します.その後alertウィンドウを閉じてから操作を開始し、最後の行までpaintを実行し、変更したスタイルを画面に出力します.
settimeout遅延alertの呼び出しを使用するとどうなりますか?

let clickCnt = 2;

$button.addEventListener('click', (e) => {
  // 버튼의 스타일을 변형하는 코드
  if ($button.style.textDecoration === 'line-through') {
    $button.style.textDecoration = '';
  } else {
    $button.style.textDecoration = 'line-through';
  }
    
  clickCnt++;
  //세번 클릭시 alert창 표시  
  if(clickCnt % 3 === 0) {
    setTimeout(() => alert('3번째 클릭!'));
  }
})

次にsettimeoutの遅延を0に設定します(実際には0ではありません).これは、alert呼び出しが後で遅延した場合です.

同様に、ボタンを上から表示すると、「click」はイベントハンドラを呼び出します.イベントハンドラのsettimeoutは、Timer Firedの後にのみalert呼び出しが表示されます.これによりpaintプロシージャがすぐに表示され、実際にはボタンのスタイルが変更されてalertウィンドウが表示されます.