jQuery1.12対応。使い方、入門、サンプル、ノウハウをとことん極めた最強ブログ。2016/05/07Deferredその1:何故をDeferred使うかの理由さて、jQuery.Deferred(以下、Deferred)の使い方についての記事を書こうかと思います。Deferredを使う主なメリット・コールバックの入れ子(ネスト)によるスパゲティコードを防げる。・可読性の高い並列処理のコードを書ける。・これにより非同期処理の記述や処理をスムーズに進められる。このようなメリットがあります。このDeferredを敢えて使わないパターンをいくつか挙げて、その後にDeferredを使った簡単な処理を記述しようかと思います。Deferredの様々な詳細な書き方とかについては、他の記事に書いていきます。ここではDeferredを使用しないパタートの比較という事で。Deferredを使わないパターンリクエストのパラメーターに文字列を囲んで返すテスト用のPHP1.このパラメータは"contents"があり、"パラメーターのキーをcontentsとして受け取った値は"と"です。"で囲んだものを出力。"result")には表示されません。正確には文字列はtextメソッドによりセットはされるのですが、その一連の処理より先にブラウザの表示がされてしまう為、結果が見れないという事になります。sleep関数を使って処理を遅らせてブラウザで表示される前に$.ajax()でresAjax変数に値がセットされるのを待つという手もありますが、非現実的です。ここでDeferredを使わない他の2つの方法を試してみます。この様にasyncオプションをfalseとすれば同期通信となる。その間はブラウザがロックされてクリックなどのアクションを受付なくなるので、非推奨とされている。"result"></div></body></html>Deferredを使わないでdivタグに結果を表示する方法その1のサンプルコードの結果この様にasyncオプションをfalseとすれば同期通信となりブラウザに表示される前にdivタグにテキストがセットされます。その間はブラウザがロックされてクリックなどのアクションを受付なくなるので、非推奨とされています。次にコールバック関数を使っての対応を試してみましょう。Deferredを使わないでdivタグに結果を表示する方法その2(コールバックを使う)1.ajaxCallbackという変数にajax通信のコールバックオブジェクトを作成2.ajax通信の成功時にtest-deferred-reason.phpから返ってきたレスポンスを引数に代入。"result"></div></body></html>Deferredを使わないでdivタグに結果を表示する方法その2、コールバックのサンプルコードの結果このようにコールバックを使って対応も可ですが、処理によっては、そのコールバック関数自体が複数の入れ子になり、コードの可読性というものが低くなる場合が多いです。そこで便利なので、deferredの出番というわけです。Deferredを使うパターンお待たせいたしました!いよいよDeferredを使うパターンを見ていきましょう。"result")のテキストにセットする。Deferredの状態をresolveとする。これによりコールバック関数は.done()となる。"result"></div></body></html>Deferredを使ってみるのサンプルコードの結果Deferredを使うには、このように処理からDeferredオブジェクトを作成し、処理の中で状態を指定して引数を渡します。状態がresolveやrejected等により.done()や.fail()等に処理を分けてコードを書いていきます。これが簡単なDeferredのサンプルの例となります。※Deferredの様々な詳細な書き方とかについては、他の記事に書いていきます。コメントをキャンセルメールアドレスが公開されることはありません。...PREVgetScript():getScriptメソッド(成功はdone、失敗はfail)のjavascriptの取得NEXTDeferredその2:deferred.state()、resolve()、reject()、done()、fail()を検証してみる購読するプロフィール元システムエンジニア。最近フロントエンド開発に興味が出てきてjQuery無双なるブログを立ち上げる。趣味はカメラ(メイン機:Canon6D)でシャッターチャンスは逃さないがモットー。jQuery1.12対応。使い方、入門、サンプル、ノウハウをとことん極めた最強ブログ。