ログイン

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

jQueryAnimationの問題

jQueryAnimation

処理の順番を決めよう

問題

今回は処理の順番を意図的に決めていきたいと思います。今までは上から下へ処理が行われていたと思いますが、下のコードを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を行うと言うことです。
完了にする!
LINEの友達追加でお役立ち動画をGET!!