promise() を返さないのに $.when が有効な理由を知りたいです

###『前提』
次の$.whenの中には、myFadeOut()とgetAjaxData()という２つの関数があります。

２つの関数ではいずれもpromise()を返しています。（後述の『全体のコード』に掲載しています。）

だからこそ// 遅延処理が可能だと解釈しているのですが、質問があります。

js
1  $.when( 
2    myFadeOut(area,1000), getAjaxData(100)
3  )
4  .done(function(myFadeOutResult, ajaxData) {
5    // 遅延処理
6  });
7

###『質問』
myFadeOut()を関数化せず次のように展開した場合にも// 遅延処理が可能なのはなぜですか？

展開するとpromise()を返していないのに、なぜ遅延が可能なのか？という理屈がわからないです。

js
1  $.when( 
2    // myFadeOut() を展開し、promise() は返していない
3    $('section').fadeOut(1000, function(){
4      var html = getHtml(area);
5      $('section').html(html);
6    }),
7    // getAjaxData() は展開せず関数で実行
8    getAjaxData()
9  )
10  .done(function(myFadeOutResult, ajaxData) {
11    // 遅延処理
12    // promise() を返していないのになぜ遅延処理が可能なのか？
13  });
14

###『全体のコード』
以下は『前提』の方に掲載した、展開前のコードの全体像になります。

ご覧の通りmyFadeOut()とgetAjaxData()はproimse()を返しているのでこれは// 遅延処理が可能なのは当然だと思うのですが、

どうしてmyFadeOut()の方を『質問』のように展開し、proimse()を返していない場合でも可能なのか？

そのことについて教えて頂けましたらうれしく思います。

動くサンプル：https://jsfiddle.net/acbe51sd/

html
1<main>
2  <section>
3    <!-- Ajaxデータを反映したHTMLが挿入される -->
4  </section>
5</main>
6<button data-area="one">Pjax one</button>
7<button data-area="two">Pjax two</button>

js
1$('button').click(function(){
2  const area = $(this).attr('data-area');
3  Pjax(area);
4});
5
6function Pjax(area){
7
8  $('body').append('<p class="loading">loading</p>');
9
10  $.when( 
11    myFadeOut(area,1000), getAjaxData(100)
12  )
13  .done(function(myFadeOutResult, ajaxData) {
14    console.log(ajaxData);
15    $('body').find('.loading').remove();
16    $('section').find('div[data-area="'+area+'"]').html('<p>'+ajaxData+'</p>');
17    $('section').fadeIn(1000, function(){
18      //history.pushState(location.href);    
19    });
20  });
21}
22
23function myFadeOut(area,dalution){
24  const d = new $.Deferred;
25  $('section').fadeOut(dalution, function(){
26    var html = getHtml(area);
27    $('section').html(html);
28    d.resolve();
29  });  
30  return d.promise();
31}
32
33function getAjaxData(delay){
34  const d = new $.Deferred;
35  setTimeout(function(){ // テストのためAjaxの代わりにsetTimeOut
36    const ajaxData = 'Ajaxデータ';
37    d.resolve(ajaxData);
38  }, delay); 
39  return d.promise();
40}
41
42function getHtml(area){
43  let html;
44  if( area == 'one' ){
45    html = `<div data-area="one"></div>`;
46  }
47  else if( area == 'two' ){
48    html = `<div data-area="two"></div>`;
49  }  
50  return html;
51}

行動規範の内容に同意します

回答4件

ドキュメント jQuery.when() には確かに Deferred でも Promise でもなければ即時解決と書いてあります。
しかし、 .promise() の例に .promise() を呼ばずに $.when() で処理しているものがあり、$.when() に渡されたものが jQuery オブジェクトの場合は内部で .promise() 相当のことが処理されているものと思われます。
https://api.jquery.com/promise/#example-2

投稿2019/12/25 02:08

x_x

総合スコア13749

Lhankor_Mhy

2019/12/25 03:24

> 内部で .promise() 相当のことが処理されているコードを見る感じ、 // Check for promise aspect first to privilege synchronous behavior if ( value && typeof( method = value.promise ) === "function" ) { method.call( value ).done( resolve ).fail( reject ); とあるので、間違いないかと思います。というか、jQueryオブジェクトであるかどうかをチェックしていないので、promiseをメソッドに持つオブジェクトならなんでも通ってしまいかねないですね。 https://github.com/jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/deferred.js

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

関連した質問