Ajaxでタイミングが整合できず…

Question

###前提・実現したいこと
<button>クリック時に以下の順で処理したいです。

1．<section>をfadeOut()
2．<section>に<div>を挿入
3．<div>に「Ajaxデータ」を挿入

###発生している問題
Ajaxの処理が早い場合に困った事態になりました。

fadeOut()が終わってやっと存在する<div>なのですが、もしAjaxがfadeOut()より早く終わると、「<div>なんてないから「Ajaxデータ」を挿入できないよ」となるんです。

###該当のソースコード
この流れです。
実際に動かせるように、AjaxでなくsetTimeOutで書いています。

問題は★の数値（jsfiddleでいう21行目）で、これがAjaxの処理速度（つまりsetTiemout速度）を示すのですが、もしfadeOut()より早い場合に問題が生じます。

???? https://jsfiddle.net/v8pmcsak/

<main>
  <section>
    <!-- Ajaxデータを反映したHTMLが挿入される -->
  </section>
</main>
<button data-area="one">Pjax one</button>
<button data-area="two">Pjax two</button>

$('button').click(function(){
  const area = $(this).attr('data-area');
  Pjax(area);
});

function Pjax(area){
/*
Ajaxの処理が早い場合だと
（つまり21行目の★がフェードより早い場合だと）
「Ajaxデータ」がHTMLに反映できない
*/

  // 表示切替
  $('body').append('<p class="loading">loading</p>')
  $('section').fadeOut(1000, function(){
    var html = getHtml(area);
    $('section').html(html);
  });

  $.Deferred().resolve().then(function() {
    return getAjaxData(100); // ★
  })
  .then(function(ajaxData) {
    console.log(ajaxData);
    $('body').find('.loading').remove();
    $('section').find('div[data-area="'+area+'"]').html('<p>'+ajaxData+'</p>');
    $('section').fadeIn(1000, function(){
      //history.pushState(location.href);	
    });
  });
}

function getAjaxData(delay){
  const d = new $.Deferred;
  setTimeout(function(){ // テストのためAjaxの代わりにsetTimeOut
    const ajaxData = 'Ajaxデータ';
    d.resolve(ajaxData);
  }, delay); 
  return d.promise();
}

function getHtml(area){
  let html;
  if( area == 'one' ){
    html = `<div data-area="one"></div>`;
  }
  else if( area == 'two' ){
    html = `<div data-area="two"></div>`;
  }  
  return html;
}

###試したこと
まず★の数値を大きくした場合に問題が生じませんでした。
たとえば上はfadeOut(1000)に対して★が100ですが、★を1001にしたらちゃんと「Ajaxデータ」が表示され問題は生じません。

あとあらかじめ<section>に<div>を書いてやれば、やはり問題は生じません。

以上２点からAjaxの処理速度が原因だ！と思い込んでいますが、もしかしたら他の原因かもしれません。

どうすればAjaxの処理速度にかかわらず、実現したい順番で処理できるでしょうか。

###試したこと（追記）
ご回答の中に
$.Deferred().resolve().then(function() {ではなく
$.when()を使えとのアドバイスを頂きました。

その理由として自分なりに推測したのは、

3．<div>に「Ajaxデータ」を挿入
のために待たなければならない処理が

1．<section>をfadeOut()
2．<section>に<div>を挿入
と２つあり、

そのように複数の処理を待つ場合は$.Deferred().resolve().then(function() {では対応できないためだと考えました。

以上のように考え、修正したのが次のコードです。【変更➀】と【変更➁】が上の推測に沿った修正になります。

$('button').click(function(){
  const area = $(this).attr('data-area');
  Pjax(area);
});

function Pjax(area){

  // 表示切替
  $('body').append('<p class="loading">loading</p>');
	
  /*
  【変更➀】
  この部分を myFadeOut() と関数化し、getAjaxData() の場所に書いてみました
  $('section').fadeOut(1000, function(){
    var html = getHtml(area);
    $('section').html(html);
  });
  */

  /*
  【変更➁】
  ２つの処理完了を待つため $.when().done() に変更しました
  */
  $.when( 
    myFadeOut(area,1000), getAjaxData(100)
  )
  .done(function(ajaxData) {
    console.log(ajaxData);
    $('body').find('.loading').remove();
    $('section').find('div[data-area="'+area+'"]').html('<p>'+ajaxData+'</p>');
    $('section').fadeIn(1000, function(){
      //history.pushState(location.href);	
    });
  });
}

// 【変更➀】の関数
function myFadeOut(area,dalution){
  const d = new $.Deferred;
  $('section').fadeOut(dalution, function(){
    var html = getHtml(area);
    $('section').html(html);
    d.resolve();
  });  
  return d.promise();
}

function getAjaxData(delay){
  const d = new $.Deferred;
  setTimeout(function(){ // テストのためAjaxの代わりにsetTimeOut
    const ajaxData = 'Ajaxデータ';
    d.resolve(ajaxData);
  }, delay); 
  return d.promise();
}

function getHtml(area){
  let html;
  if( area == 'one' ){
    html = `<div data-area="one"></div>`;
  }
  else if( area == 'two' ){
    html = `<div data-area="two"></div>`;
  }  
  return html;
}

ですが、、これでもできず、再び限界になりここに追記させて頂きました。

解決できる方がいらっしゃいましたらご回答頂けましたら幸いです。

Comments

[hentaiman]

質問のタイトルにコールバックって書いてあるけどその方法では期待する動作をしなかったという事でしょうか？

[kannmuri]

ちょっとコールバックの意味がわかってないのでタイトルを直しました。

Answer 1

方法その1

ボタンクリック時の処理内容を、以下のように変更する。

1. 予め<div>要素を生成しておく。
2. <section>をfadeOut()
3. <section>に予め生成しておいた<div>を挿入
4. 予め生成しておいた<div>に「Ajaxデータ」を挿入

これなら、3. と 4. の順序が入れ替わっても問題ありません。
ちなみに、これは「実現したい順番で処理する方法」ではなく、「実現したい順番で処理されなくてもうまくいく方法」です。

方法その2

$.when（もしくは Promise.all）を使い、

• <section>をfadeOut()して<section>に<div>を挿入
• Ajaxデータを取得

がすべて終わった後に

• <div>に「Ajaxデータ」を挿入

が実行されるするようにする。

試したこと（追記）部分について

$.when() の概要については正しく理解できているようです。おめでとうございます。

ただし、使い方を一部間違えているようです。

$.when( 
  myFadeOut(area,1000), getAjaxData(100)
)
.done(function(ajaxData) {

の done の行を

$.when( 
  myFadeOut(area,1000), getAjaxData(100)
)
.done(function(myFadeOutResult, ajaxData) {

に変えて実行してみてください。

なお、ざっとしか見ていないので、他にもバグがあるかもしれません。

Comments

[kannmuri]

方法２がいいですね。

質問にあるやつですでに
$.Deferred().resolve().then(function() {
を使ってますけど、
$.when
ってこれと一緒では？？
自分的にはちょっと解釈が難しいんですが、実際にどんなコードでできるようになるか教えてもらえませんか。

[2KOH]

$.Deferred().resolve().then(function() {
と
$.when
は別物です。

$.when を理解していないと思われますが、その状態で実際のコードを要求するというのは丸投げになります。
自分は丸投げの質問には答えたくありません。

$.when のことがわかっていないのであれば、まず調べてください。
$.when のことを理解したら、方法その2 でコードを書いてみてください。
その過程でわからないことが出てきたら、そのときにその都度わからないことを質問してください。

[kannmuri]

うわ、なんかすみません。

[kannmuri]

たびたびすみません。試したこととして追記した通りの感じでまた躓いてまして…よかったらもう一歩助けてもらえませんでしょうか？

[kannmuri]

さっそくご回答の修正ありがとうございます！なるほど、$.whenの中の順で、doneに返るんですね。覚えておきます。

[kannmuri]

これ引数が大量にあってmyFadeOut()にそれらを渡すことに抵抗があるんですけど、myFadeOut()のように別の関数にしないでPjax()の中に書いたままでは、実現できませんか？？

[2KOH]

この質問の本題から外れてますし、このコメントは本来質問するところではありませんし、文章だけだと何が何やらよくわかりません。

別の質問を立てて行ってください。

[kannmuri]

ありがとうございました！

[kannmuri]

あとすみません、呼び方としては、
$.Deferred().resolve().then(function() {
も
$.when
も
どちらも「コールバック」というものですよね？

他の方から「コールバックを使いましょう」とご回答があるので、「もしかしたら他にコールバックを使った解決方法というのがあるのか？」と気になっているんですけど、質問の時点でコールバックを使ってますよね？

[2KOH]

コールバックとは、ある関数の引数として渡される関数のことです。
上のコメントではやや気になる書き方がされていますが、then関数や when関数のことではなく、then関数や when関数の引数として渡される関数のことをコールバックと言います。

他の方が言っているコールバックとは、リンク先が $.ajax であることから、$.ajax の引数に渡す関数のことを指すと思われます。
私は回答者本人ではないので推測するしかありませんが、おそらく質問文のコード内に $.ajax が使われていなかったため「$.ajax のコールバックを利用していい具合に実装しましょう」という回答をしたものだと思われます。

[kannmuri]

なるほど。$.ajaxだと
const d = new $.Deferred;
を書かなくても大丈夫みたいですね。
判断がむずい！ややこい！がんばります！
ご返信ありがとうございました。

Answer 2

コールバック使いましょう
公式ドキュメント読むの苦手ならjquery+ajaxで検索すれば大量にサンプル出ます