2015年11月30日月曜日

【jQuery3】【Deferred】というわけでjQuery3からはDeferredがPromise/A+に準拠するそうでthenの動きを再確認してみた。

というわけでお久しぶりです。junerです。Google+では毎日投稿しているものの、blogの更新はもう全くしていなかったわけですが、コーディングは仕事も趣味もありますのでやっていたけどブログにアウトプットしておりませんでした。

で、久々の投稿となるわけですが、今回はjQuery3.0.0 alphaが出たことについての話です。

私は仕事でも、趣味でも jQueryを使う場合はPromiseもとい jQuery.Deferred をよく使います。jQuery3はそのDeferredの元となったPromise/A+という規格にDeferredが更に近づいた実装になったという話なので、チェックしてみました。

で、今回は以下の様な感じのソースを書きまして、見やすい様なテストを書いてみたいと思います。

function(){
// 1.初期処理
var d = $.Deferred(function(){
//2.deferred内の処理
// 同期の場合はその儘resolve
// 非同期の場合は非同期的にresolveする
})
.then(function(){
//3.resolve時の処理
});
// 4.外処理
}

それをjQuery2.1.3で実行した例が以下の様な感じとなります。

これによりわかることはjQuery2迄は同期的にresolveした場合に以下の様に実行されます

  • 1.初期処理
  • 2.deferred内初期処理
  • 3.resolve時の処理
  • 4.外処理

また、非同期的にresolveした場合、以下の様に実行されます。

  • 1.初期処理
  • 2.deferred内初期処理[結果は非同期]
  • 4.外処理
  • 3.resolve時の処理

全く同じでjQuery3で実施したのが以下のサンプルとなります。

それが、jQuery3だと同期的なresolveでも以下の様になります。

  • 1.初期処理
  • 2.deferred内初期処理[結果は非同期]
  • 4.外処理
  • 3.resolve時の処理

勿論、非同期的でも同様に以下の様になります。

  • 1.初期処理
  • 2.deferred内初期処理[結果は非同期]
  • 4.外処理
  • 3.resolve時の処理

以上、実験ついでのメモでした。