JavaScriptの実行タイミング

Question

例えば、

<script>
  $(function() {
    $('div').click(function() {
      $('div').css({'color': 'red'});
      alert('文字を赤色にしました');
    });
  });
</script>
<div>aaaaa</div>

上記のコードの場合、まずアラートが出てから文字が赤色に変わります。
これを、文字の色が変わってからアラートが出るようにすることは可能なのでしょうか？

Comments

[m.ts10806]

大抵のことは可能なので質問の仕方を改めるか、自身で調べたこと試したことを具体的に書かれたほうが良いです。
現状丸投げですから。タイトルと内容の関連性もあまり近くないです

Answer 1

アニメーションフレームを2回待つと、CSSの変更が画面に反映されたことを保証できます。(アニメーションフレームコールバックは画面が更新される前に呼ばれるため)

      $('div').css({'color': 'red'});
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          alert('文字を赤色にしました');
        });
      });

Comments

[avantgarden]

requestAnimationFrameは初めて知りました。
調べてみます。有難うございます。

Answer 2

ブラウザによりますけどねchromeはこの手の処理に弱いので・・・

$(function() {
  $('div').on('click',function() {
    $('div').css({'color': 'red'}).delay(0).queue(function(){;
      alert('文字を赤色にしました');
      $(this).dequeue();
    });
  });
});

Comments

[avantgarden]

なるほど。有難うございました。