トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > javascript同期非同期

test(); //非同期処理
test2(); //同期処理

非同期処理があると、行数的に前に記述した処理を終える前に
後に記述した処理を先に実施することがある。

javascripは基本非同期だが、同期的に前の処理が終わってから
後の処理を実施する方法について検討する。

1.前の関数に処理完了後のコールバック関数を設定する

test(arg1,test2);
test2();

/*クラスを使った場合のイメージ*/
test = new ClassA(arg, function(result) {console.log(result);});
function ClassA(arg, callback) {
   if(条件) {
       callback(結果等); //引数で指定していたcallback関数の呼び出し
   }
}

2.いっそのこと前の関数の中に書く。

test(arg) {
   //何らかの処理
   test2();
}

3.yieldを使う。

/*html側でjavascript1.7以降であることを宣言*/
<script type="text/javascript;version=1.8" src="test.js"></script>

/*javascript側(test.js)*/
function test() {
  var generator = test2();
  generator.next(); //処理1の実行
  generator.next(); //処理2の実行
}

function test2() {
   //処理1
   yield;
   //処理2
   yield;
}

4.jquery.defferedやjsdefferedを使う。

function test() {
   var promise = test2();
   promise.done(function(){
       console.log($("#sentence").css("display"));}
   );
}

function test2() {
   var hoge = $.Deferred();
   $("#sentence").fadeOut(3000,function(){hoge.resolve();});
   return hoge.promise();
} 

※fadeOut関数であれば、コールバック関数にconsole.log($("#sentence").css("display"));を
  仕込めば良いですが…

5.promiseを使う
　http://js-next.hatenablog.com/entry/2013/11/28/093230
　http://www.slideshare.net/dynamis/ecmascript-2013(54ページ)
　http://www.html5rocks.com/ja/tutorials/es6/promises/

6.async/waitを使う
　https://qiita.com/soarflat/items/1a9613e023200bbebcb3

7.setIntervalで定期的に状態を見る。
8.擬似的にsleepしてみる。
　方法8-1:
　http://d.hatena.ne.jp/chaichanPaPa/20080907/1220781475に書いてあるように、
　関数処理前にDateを取得して、一定時間が経過するまで、
　while文でDateを取り続けるという手でWaitを実現できる。

　方法8-2:
　http://d.hatena.ne.jp/kminoru/20080305に書いてあるように、
　setIntervalの引数に指定する関数内で、終了する条件を決定し、clearIntervalする。

9.処理完了フラグを設けて、ひたすら無限ループで待つ…というのは、javascriptは
　単一スレッドのため、if文で無限ループに陥ってかえって来れなくなる恐れがあるので
　ダメそう。

function test() {
   //非同期処理をここに書く
   loop:while(true) {
      if(非同期処理が終わった時にtrueになる条件[フラグ]) {
         //処理
         break loop;
      }
   }
}

関連

• 一定時間ごとの繰り返し