jQueryの when() で、ループを使う方法

Question

###実現したいこと
$.whenでループを使いたいです。

###該当のソースコード
現状のfunc1()になります。クリックしたら、

➀get( 'A' )とget( 'B' )を同時に実行する。
➁その戻り値を取得したら順次、新しい処理を実行する。

という処理です。

実現したいことはこの$.when()の中のget()をループにすることです。

尚、理由はget()の引数が不定数の配列だからです。

<button id="func1">func1() を実行</button>

// get( 'A' )とget( 'B' )を同時に実行しつつ、検索結果は順次表示できる
$('#func1').on('click',function(){
	func1(); 
});

function func1() {
  $.when( 
    get( 'A' ).done( function( A ) { 
    	console.log( A );
    }),
    get( 'B' ).done( function( B ) {
    	console.log( B );
    })
  ).done( function( A, B ) {
    console.log( A+'を使って新しい処理を実行' );
    console.log( B+'を使って新しい処理を実行' );
  });
}

function get( arg ){
  console.log('getA( '+arg+' )を実行');
  var delay = arg=='A' ? 500 : 1000;
  var deferred = new $.Deferred;
  setTimeout( function() {
    var data = arg + 'の検索結果';
    deferred.resolve( data );
  }, delay);
  return deferred.promise();
}

###試したこと
通常のforEachを使うと以下func2()になるかと思いました。

理想はfunc1()と同様に、
Aの検索結果
Bの検索結果
↓
Aの検索結果を使って新しい処理を実行
Bの検索結果を使って新しい処理を実行
という順序で表示することです。

しかしその順序が逆になり、さらに.done( function( A, B )が戻らずundefinedを使って新しい処理を実行のように表示されてしまいます。

<button id="func2">func2() を実行</button>

// func1()と同様の処理について、arrを使ってループで実現したい
$('#func2').on('click',function(){
  var arr = ['A','B']; // arrは不定で['A','B','C']などもありえる
  func2( arr ); 
});

function func2( arr ){
  $.when( 
    loop( arr )
  ).done( function( A, B ) { 
    console.log( A+'を使って新しい処理を実行' );
    console.log( B+'を使って新しい処理を実行' );
  });
}
function loop( arr ){
  arr.forEach( x => {
    get( x ).done( function( x ) { 
      console.log( x );
    });
  });
}

順序が逆になるということは、loop()の方でも$.Deferredが必要か？と思ったのですが、その場合resolve()で戻す値をどうすればいいのかとわからなくなり、結局質問を投稿させていただく運びとなりました。

有効な方法をご存じの方いらっしゃいましたら宜しくお願い致します。

すべてのコード

Answer 1

配列に入れて（一工夫して）渡せばよいのでは。

【jQuery.when()にdeferredsを配列で渡したい - ソフト開発お仕事メモ????】
https://sekom.hatenablog.com/entry/20130705/p1

【不特定数のタスクをjQuery.Deferredで扱うTips - ねずみとりんご】
https://msitter29.hatenablog.com/entry/2016/04/15/200058

Comments

[konsai]

いつも情報ありがとうございます。以下の流れでよさそうでしょうか。

```jQuery
$('#func2').on('click',function(){
var arr = ['A','B'];
func2( arr );
});

function func2( arr ){
var funcArray = getfuncArray( arr );
$.when.apply(null, funcArray).then(
function( A, B ){
console.log( A+'を使って新しい処理を実行' );
console.log( B+'を使って新しい処理を実行' );
}
);
}

function getfuncArray( arr ){
var result = [];
arr.forEach( x => {
var process = get( x ).done( function( x ) {
console.log( x );
});
result.push( process );
});
return result;
}
```

[konsai]

もしよろしければ以下２つ知りたいのですが、

１．
「>一工夫して」とはどの点でしょうか？
上のコードは教えて頂いたリンク1つ目のほぼ丸コピでしたので、特段工夫が必要な点があれば見逃しているのかと不安を覚えています。

２．
「.apply」の引数「null」の使い道はどのようなものになるのかご存じでしょうか？ここを「null」としたり「$」としたりなどの情報がありましたが、その使い道として「http://js.studio-kingdom.com/javascript/function/apply」などの説明は見たものの、本質問に沿った場合にいかなる使い道かなど具体的なイメージが浮かばず、アドバイスを乞うた次第です。

[kei344]

> 「>一工夫して」とはどの点でしょうか？
$.whenの引数に直接配列渡すわけに行かないので、applyとかスプレッド構文とか渡し方に工夫が必要である、ということです。

> 「.apply」
コメントで簡単に説明するのが難しいので、説明しているサイトやMDNを参考にミニマムコードを作って確認してみてください。

[konsai]

すると一工夫の件は、上記コードで問題ないということでよろしいでしょうか。

applyの件ですが安易にアドバイスを求めてすみません。根気よく調べてみたいと思います。

[kei344]

不安はわかりますが、コードについては実行して確認してください。私も含め特に技術力のない人間も回答が出来るので、間違ったコードに対して「問題ない」ということもあると思います。

[konsai]

仰る通り慣れない方法はとにかく不安です。度々ありがとうございます。

[konsai]

申し訳ございません、うっかり質問の前提を忘れていました。

arr の数は不定でして、よって 14:10 のコードで

function( A, B ){

としているところの( A, B )をどのように受け取れるか、も問題となっているのでした。

ここは arr の数だけ( A, B )だったり( A, B, C )だったりするわけですが、なんとかしてそのようには書けますでしょうか？

[kei344]

【arguments - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments

【【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita】
https://qiita.com/Nossa/items/e6f503cbb95c8e6967f8#%E5%8F%AF%E5%A4%89%E9%95%B7%E5%BC%95%E6%95%B0%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B