Javascriptで学ぶ非同期処理【教材紹介あり】

今回は、Javascriptの非同期処理と、jQueryのDefferd関数についてまとめます。
Javascriptでは、ファイルの読み込みやユーザの操作などのイベントを待って関数を実行したいときがあります。
そういった処理を非同期処理といいます。

通常はソースコードが上から順に処理が実行されていきます。
Javascriptでは、コールバック関数（イベントの実行を受け取ってから実行される関数）を利用して非同期処理を実行します。

しかし、コールバック関数は、処理をネストしていくため、数が多くなるとネストが深くなってしまい、可読性が下がってしまいます。
その問題を解決し、見やすいかたちで非同期処理を実装するための仕組みが、jQueryのDeferred関数です。

Javascriptの勉強には、Udemyのこの動画を使ってます。

【Udemy】Javascriptでリバーシゲームをつくる！

全くの初心者にはやや難しい中級者向けの内容ですが、一つ一つ理解して進めてこうと思ってます。

つまるところ、非同期処理とは？

Javascriptのコードは非同期処理が多い、らしい。

非同期処理とはなんぞや、ということで調べてみたものの、なかなかしっくりくるものがありませんでした。
調べた中で一番わかりやすかったのはこのページでした。
非同期処理の概念について解説

つまるところ非同期処理とは、外部の処理や入力が必要なプログラムを正しく実行するために、「ちょっと待ってあげる」仕組みかなと理解しました。
優しいお姉さんみたいな感じですかね？(混乱)

Javascriptでは、この非同期処理が重なっていくとネストが深くなっていくために、可読性が下がっていくという問題点があるようです。
そこで、非同期処理をわかりやすく書くための仕組みとして、jQueryのDeferred関数を使います。

Defferd関数を使ってみる

jQueryのDeferred関数を使った非同期処理で、アントニオ猪木メソッドを作ってみました。

Javascriptの非同期処理をつかったアントニオ猪木メソッド pic.twitter.com/ApdS0nBgAx
— カシワバユキ (@yuki_kashiwaba) 2018年11月29日

コードはこちら。

  onload = function(){
    var wait = function(text,time){
      var d = $.Deferred(); //Defferdオブジェクトの生成
      var div = document.getElementById("div");

      setTimeout(function(){
        div.textContent = text;
        d.resolve();
      }, time);

      return d.promise();
    }

    var i = 1;
    if(i == 1){
      wait("3",1000)
      .then(function(){
        return wait("2",1000);
      })
      .then(function(){
        return wait("1",1000);
      })
      .then(function(){
        return wait("ダッーーー！！！！",1000);
      });
    }
  };

結構ややこしくて分かりづらかった…。

まず、
var d = $.Deferred();
の部分でdeferredオブジェクトが生成されます。

DeferredオブジェクトのPromiseオブジェクトを戻り値として返し、指定した秒数を待ちます。

1000ミリ秒後、thenメソッドが実行され、再びwaitメソッドを実行。

そしてまたPromiseオブジェクトが返ってくる…。

この繰り返しです。

理解を深めるために図解してみました。