質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

3088閲覧

jQueryのdeferred/promiseを使用してWebSQLの処理を同期化したい

tamogi

総合スコア72

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2015/09/13 12:53

テーブル1からIDを取得し、そのIDを元にテーブル2からデータを取得する処理を作成したのですが、
WebSQLのトランザクションは非同期で同時に走ってしまうため、1つ目のテーブルのデータを取得する前に2つ目のSQLが走ってしまいます。

javascript

1function selectItemList(_no){ 2 var id = null; //tbl1から取得したデータを保持する変数 3 4 //tbl1からデータを取得 5 db.transaction( 6 function(tr){ 7 tr.executeSql( 8 "SELECT id FROM tbl1 WHERE no = ?", 9 [_no], 10 function(rt,rs){ 11 //データを変数に退避 12 id = rs.rows.item(0).id; 13 }, 14 function(){ 15 console.error("Select tbl1 error"); 16 } 17 ); 18 } 19 ); 20 21 //tb1から取得したidを元にtbl2からデータを取得したいが、 22 //両方のSQLが同時に走ってしまうためidはnullのまま... 23 db.transaction( 24 function(tr){ 25 tr.executeSql( 26 "SELECT * FROM tbl2 WHERE id = ?", 27 [id], 28 function(rt,rs){ 29 //成功した場合の処理 30 hogehoge... 31 }, 32 function(){ 33 console.error("Select tbl2 error"); 34 } 35 ); 36 } 37 ); 38} 39

jQueryにはこのような非同期処理を扱うためにdeferredメソッドが用意されているようですが、解説サイトやサンプルコードを見ても理解することができなかったので、この処理を同期処理として扱う方法を教えてください。
なお、上記のコードは実際のコードを簡略化したものなので、記述ミスがあるかもしれません。

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

○○が終わったら××する、という感じのものをjQyery deferred/promiseで扱う場合は

○○の処理をfunction()で包んでfunction内部で$.Defferedオブジェクトを生成し
生成したdefferedオブジェクトからdeffered.promise()で得られたPromiseオブジェクトをreturnする
○○の処理内の非同期処理が終わったときに成功・失敗をそれぞれresolve / rejectで通知する

というのが基本形となります

ご質問の処理の場合をDefferedを使ってかなり大雑把に書き直すと

JavaScript

1function selectItemList(_no){ 2 //tbl1からデータを取得する処理を包んだ 3 var tbl1 = function(){ 4 var dfd = jQuery.Deferred(); 5 db.transaction( 6 function(tr){ 7 tr.executeSql( 8 "SELECT id FROM tbl1 WHERE no = ?", 9 [_no], 10 function(rt,rs){ 11 //データを変数に退避 12 var id = rs.rows.item(0).id; 13 // resolve()に与えられた引数はコールバックthen() / done()の引数となる 14 dfd.resolve(id); 15 }, 16 function(){ 17 console.error("Select tbl1 error"); 18 dfd.reject(); // 失敗したことを通知する 19 } 20 ); 21 } 22 ); 23 return dfd.promise(); 24 }; 25 26 27 // tbl1処理のpromisedオブジェクトを受け取る 28 // こういう変数で受け取らずにtbl1().done().fail()など書いていくことも多い 29 var promised = tbl1(); 30 // tbl1の取得処理が成功裏に終わったら 31 promised.done(function(id){ 32 // tbl2からデータを取得する 33 db.transaction( 34 function(tr){ 35 tr.executeSql( 36 "SELECT * FROM tbl2 WHERE id = ?", 37 [id], 38 function(rt,rs){ 39 //成功した場合の処理 40 // hogehoge... 41 }, 42 function(){ 43 console.error("Select tbl2 error"); 44 } 45 ); 46 } 47 ); 48 }).fail(function(){ 49 // 失敗していたら 50 // 何かしたい場合はここに 51 }).always(function(){ 52 // 成功・失敗に関わらず行いたい処理はここに書く 53 }); 54}

もちろん、tbl2からデータを取得する処理のところもtbl1()のように包んでtbl2()が終わったらtbl3()・・・という
数珠つなぎのようなこともできます
このPromiseの機構ですがJavaScriptの新しいバージョンではjQueryに頼らず標準装備されてます(確かブラウザでもChromeとかFirefoxにはもう入ってたはず)

※WebSQLからデータを取得・・・という処理なのでChromeとかWebkit系想定かな?と思いますが、WebSQLは残念ながら正式な仕様策定は断念されており、FirefoxやIEなどではサポートされていません
私も個人的には好きだったんですけどね・・・

投稿2015/09/14 01:43

khirose

総合スコア251

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tamogi

2015/09/14 07:14

回答ありがとうございます。 後ほど実践してみます! WebSQLはPhoneGapの内部DBとして使っています。 HTML5の仕様として策定を続けて欲しかったですね…
tamogi

2015/09/14 15:10

実践してみたらうまくいきました! 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問