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

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

新規登録して質問してみよう
ただいま回答率
85.50%
コールバック

コールバックは他のコードに引数として渡されるコードのことを指します。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

752閲覧

$.when.apply の戻り値にキーを渡したい

nikuatsu

総合スコア177

コールバック

コールバックは他のコードに引数として渡されるコードのことを指します。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2022/02/19 18:57

編集2022/02/22 08:12

前提・実現したいこと

以下のhoge()は、callback にある関数が終わる → fuga() を実行 → after にある関数を実行と言う順序で実行する関数です。

jQuery

1// hoge を実行( callback にある関数が終わる → fuga() を実行 → after にある関数を実行 ) 2hoge({ 3 callback: [ get_usersA(), get_usersB() ], 4 after : [ ()=>{after_func()} ] 5});

上記callbackを、下記のように$.when.applyで実行して結果をresに受け取っているのですが、

jQuery

1 $.when.apply(null, callback).then( 2 function(...res){ 3 console.log('res =', res); 4 } 5 );

今回はこのresにキーを付けたいと考えています。
つまりget_usersA()の結果か、get_users_B()の結果か、キーを指定してそれぞれ取得したい。ということです。

発生している問題

キーがないため、Aをres[0]から、Bをres[1]から取得しているのが現状です。
順序は保証されているっぽいのでこれでもいいのですが、キーがないとわかりにくい点を問題視しています。
Aをres.Aから、Bをres.Bから取得できれば理想的です。

該当のソースコード

全体のソースコードになります。
https://jsfiddle.net/6thzq2x8/

jQuery

1console.clear(); 2 3// hoge を実行( callback にある関数が終わる → fuga() を実行 → after にある関数を実行 ) 4hoge({ 5 callback: [ get_usersA(), get_usersB() ], 6 after : [ ()=>{after_func()} ] 7}); 8 9// 最後に実行 10function after_func(arg){ 11 console.log('after_func実行'); 12} 13 14// ユーザー情報Aを取得 15function get_usersA(){ 16 console.log('get_usersAを実行'); 17 const d = $.Deferred(); 18 setTimeout(function(){ 19 const users = [{id:1,name:'一郎'},{id:2,name:'二郎'}]; 20 d.resolve(users); 21 },2000); 22 return d.promise(); 23} 24 25// ユーザー情報Bを取得 26function get_usersB(){ 27 console.log('get_usersBを実行'); 28 const d = $.Deferred(); 29 setTimeout(function(){ 30 const users = [{id:3,name:'三郎'},{id:4,name:'四郎'}]; 31 d.resolve(users); 32 },1000); 33 return d.promise(); 34} 35 36// 順に実行 37function hoge( { callback = [], before = [], after = [] } = {} ){ 38 console.log('hoge()を実行'); 39 40 // callback が無い場合 41 if( !callback.length ){ 42 while( before.length>0 ){ before.shift()(); } 43 fuga(); 44 while( after.length>0 ){ after.shift()(); } 45 } 46 47 // callback がある場合 48 else{ 49 $.when.apply(null, callback).then( 50 function(...res){ 51 console.log('res =', res); 52 fuga( res ); 53 while( after.length>0 ){ after.shift()(); } 54 } 55 ); 56 } 57 58} 59 60// fugaを実行 61function fuga( res ){ 62 console.log('fuga()を実行'); 63 console.log('Aユーザー =', res[0]); // res.A のようにキー指定で取得したい 64 console.log('Bユーザー =', res[1]); // res.B のようにキー指定で取得したい 65}

試したこと

以下のようにcallbackの値を、関数の配列から、ABのキーを付与したオブジェクトに変更して、

jQuery

1hoge({ 2 // callback: [ get_usersA(), get_usersB() ], 3 // ↓変更 4 callback: { A: get_usersA(), B: get_usersB() }, // キーを付与 5 after : [ ()=>{after_func()} ] 6});

そしてapplyで実行する配列を以下のようにObject.valuesで作るよう変更したのですが、これでは実現できずでした。

jQuery

1//$.when.apply(null, callback).then( 2// ↓変更 3const arr = Object.values(collback); 4$.when.apply(null, arr).then(

同じようにPromise.allも試しましたが残念ながらこちらも実現できずでした。

jQuery

1//$.when.apply(null, callback).then( 2// ↓変更 3const arr = Object.values(collback); 4Promise.all(arr).then(

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

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

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

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

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

guest

回答1

0

ベストアンサー

一案として、こういうのはいかがですか?

js

1hoge({ 2 // callback: [ get_usersA(), get_usersB() ], 3 callback: { 4 a: get_usersA(), 5 b: get_usersB() 6 }, 7 after: [() => { after_func() }] 8}); 9 10//... 11 12 $.when.apply(null, Object.entries(callback).map(async x=>[x[0],await x[1]])).then( 13 function (...res) { 14 res = Object.fromEntries(res); 15 console.log('res =', res); 16 fuga( res );

投稿2022/02/21 05:22

Lhankor_Mhy

総合スコア35860

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

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

nikuatsu

2022/02/21 07:15

ありがとうございます。試させて頂きましたが、res が返らないのではないかと… 以下リンクです。 https://jsfiddle.net/L14c6m9v/ このリンクの変更箇所は、ご回答いただきました次の2か所と ・5行目をコメントアウト → 6~9行目に変更 ・53~56行目をコメントアウト → 57~61行目に変更 そしてこの2か所ではエラーになるので、次の1か所の変更です ・72、73行目をコメントアウト
Lhankor_Mhy

2022/02/21 07:34

オブジェクトには length がないので、45行の条件分岐を残すつもりだとは思わなかったのですが、その部分はどうするつもりだったのですか?
Lhankor_Mhy

2022/02/21 07:58

わかりにくいかもしれないので補足しますと、 if( !callback.length ){ ↑これは、引数が配列の前提だと思います。 ご質問は、引数に渡す値を配列からオブジェクトに変更する、という内容だったかと思いますので、この条件分岐は条件が変更になるか、あるいは削除されるものだと当然に思っていました。 もし、この条件分岐が所与のものであって変更を許容できないということであれば、質問に記述されることをおすすめします。
nikuatsu

2022/02/21 23:12

そっちでしたか。すみません、全然チェックしていませんでしたwどうもありがとうございます。できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問