ログイン
問題8

処理の順番を決めよう

アイコン画像

問題8:処理の順番を決めよう

今回は処理の順番を意図的に決めていきたいと思います。今までは上から下へ処理が行われていたと思いますが、下のコードをjqueryにコピペしてコンソールをみてもらうとわかると思うのですが、このように処理に時間がかかってしまう場合、先に下のものが実行されてしまいます。今回の課題は処理1から処理5を順番に実行される(処理が完了される)ようにしましょう。

エディターのアイコンあらかじめエディタに書くコード

                $(function () {
  console.log("処理1");
  console.log("処理2");
  setTimeout(function(){
    console.log("処理3");
  }, 300);
  console.log("処理4");
  console.log("処理5");
});
¥JavaScript¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              $(function () {
  d=$.Deferred();
  console.log("処理1");
  console.log("処理2");
  setTimeout(function(){
    console.log("処理3");
    d.resolve();
  }, 300);
  d.promise().then(function(){
    console.log("処理4");
    console.log("処理5");
  });
});
¥JavaScript¥
            

コメントのアイコン解説

まずdについてですが、このようにvarやletなどをつけずに文字を定義すると、簡単に言うとどこでも使える変数になります。代入されている値については詳しい話は難しいので簡単に説明すると、$.Deferred().resolve();である処理の完了を知らせることができ、$.Deferred().promise().then()で$.Deferred().resolve()で処理の完了が知らされると、この中の処理を行います。この説明で大体わかってもらえたと思うのですが、要するに処理3が終了したらサインを出して、処理4、処理5を行うと言うことです。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる