JavaScriptでコールバック関数の使い方

Question

Javascriptで以下のように書きました

function aiueo(){
document.getElementById(“a”).style.color=“red”;}

aiueo(sleep(3000));

sleep関数は別に定義した、処理を中断するメソッドで、この場合は3秒間処理を中断することを指定しています。
しかし実際に起動してみると、aiueo()を呼び出した後3秒経ってからstyle.color=redが適用されます。

コールバック関数の記事を読んだのですが、処理が終わってからスリープを呼び出されるのではないのでしょうか？
この辺の理解ができていません。
宜しくお願い致します。

Answer 1

sleep関数は別に定義した、処理を中断するメソッドで、この場合は3秒間処理を中断することを指定しています。

しれっとsleep関数の作りを端折ってますが、
今回の質問の骨子を担う最も重要かつ検討されるべきポイントです。

ビジーwaitという非推奨な作りなのではないでしょうか？
こういうやつ

function sleep(waitMsec) {
  var startMsec = new Date();
 
  // 指定ミリ秒間だけループさせる（CPUは常にビジー状態）
  while (new Date() - startMsec < waitMsec);
}

しかし実際に起動してみると、aiueo()を呼び出した後3秒経ってからstyle.color=redが適用されます。

流れに沿ってみれば当然の話ですが、
aiueo(sleep(3000));の行に着目しましょう。

aiueo()と実行したいように思えますが、
実行するためにはsleep(3000)の結果(戻り値)を持ち込むよう指定されています。
なので先にsleep関数を実行して結果を待ってからaiueo関数を実行しています。

しかしビジーwaitは待っている間、ブラウザの動作が完全に止まるので(別タブに遷移も困難になるのでは？)
JSエンジニアのプロを100人集めれば100人が全員口を揃えて
「ビジーwaitは絶対にやめろ」と言うはずです。

普通にsetTimeoutを使った方が良いです。

setTimeout(aiueo, 3000);

Comments

[nekora]

他サイトで前に見たよなーって調べて、よし分かったと書き込もうとしたら先に正解がついてました。
お見事です。高評価付けさせていただきます。

[babbleman]

非常にわかりやすい回答をありがとうございました。
誠に有難う御座います。