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

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

ただいまの
回答率

90.04%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 113

kannmuri

score 32

前提・実現したいこと

<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>を書いてやれば、やはり問題は生じません。

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

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

試したこと(追記)

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

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

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

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

そのように複数の処理を待つ場合は$.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);
  });
  */

  /*
  【変更➁】
  2つの処理完了を待つため $.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;
}


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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hentaiman

    2019/11/08 20:42

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

    キャンセル

  • kannmuri

    2019/11/08 20:54

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

    キャンセル

回答 2

checkベストアンサー

0

方法その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) {

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/10 21:43 編集

    あとすみません、呼び方としては、
    $.Deferred().resolve().then(function() {

    $.when

    どちらも「コールバック」というものですよね?

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

    キャンセル

  • 2019/11/10 23:01

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

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

    キャンセル

  • 2019/11/11 08:02

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる