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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

685閲覧

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

kannmuri

総合スコア42

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/11/08 11:25

編集2019/11/10 10:37

###前提・実現したいこと
<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/

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>

jQeury

1$('button').click(function(){ 2 const area = $(this).attr('data-area'); 3 Pjax(area); 4}); 5 6function Pjax(area){ 7/* 8Ajaxの処理が早い場合だと 9(つまり21行目の★がフェードより早い場合だと) 10「Ajaxデータ」がHTMLに反映できない 11*/ 12 13 // 表示切替 14 $('body').append('<p class="loading">loading</p>') 15 $('section').fadeOut(1000, function(){ 16 var html = getHtml(area); 17 $('section').html(html); 18 }); 19 20 $.Deferred().resolve().then(function() { 21 return getAjaxData(100); // ★ 22 }) 23 .then(function(ajaxData) { 24 console.log(ajaxData); 25 $('body').find('.loading').remove(); 26 $('section').find('div[data-area="'+area+'"]').html('<p>'+ajaxData+'</p>'); 27 $('section').fadeIn(1000, function(){ 28 //history.pushState(location.href); 29 }); 30 }); 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}

###試したこと
まず★の数値を大きくした場合に問題が生じませんでした。
たとえば上は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() {では対応できないためだと考えました。

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

jQeury

1$('button').click(function(){ 2 const area = $(this).attr('data-area'); 3 Pjax(area); 4}); 5 6function Pjax(area){ 7 8 // 表示切替 9 $('body').append('<p class="loading">loading</p>'); 10 11 /* 12 【変更➀】 13 この部分を myFadeOut() と関数化し、getAjaxData() の場所に書いてみました 14 $('section').fadeOut(1000, function(){ 15 var html = getHtml(area); 16 $('section').html(html); 17 }); 18 */ 19 20 /* 21 【変更➁】 22 2つの処理完了を待つため $.when().done() に変更しました 23 */ 24 $.when( 25 myFadeOut(area,1000), getAjaxData(100) 26 ) 27 .done(function(ajaxData) { 28 console.log(ajaxData); 29 $('body').find('.loading').remove(); 30 $('section').find('div[data-area="'+area+'"]').html('<p>'+ajaxData+'</p>'); 31 $('section').fadeIn(1000, function(){ 32 //history.pushState(location.href); 33 }); 34 }); 35} 36 37// 【変更➀】の関数 38function myFadeOut(area,dalution){ 39 const d = new $.Deferred; 40 $('section').fadeOut(dalution, function(){ 41 var html = getHtml(area); 42 $('section').html(html); 43 d.resolve(); 44 }); 45 return d.promise(); 46} 47 48function getAjaxData(delay){ 49 const d = new $.Deferred; 50 setTimeout(function(){ // テストのためAjaxの代わりにsetTimeOut 51 const ajaxData = 'Ajaxデータ'; 52 d.resolve(ajaxData); 53 }, delay); 54 return d.promise(); 55} 56 57function getHtml(area){ 58 let html; 59 if( area == 'one' ){ 60 html = `<div data-area="one"></div>`; 61 } 62 else if( area == 'two' ){ 63 html = `<div data-area="two"></div>`; 64 } 65 return html; 66}

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

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

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

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

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

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

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

hentaiman

2019/11/08 11:42

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

2019/11/08 11:54

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

回答2

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() の概要については正しく理解できているようです。おめでとうございます。

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

javascript

1$.when( 2 myFadeOut(area,1000), getAjaxData(100) 3) 4.done(function(ajaxData) {

done の行を

javascript

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

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

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

投稿2019/11/09 03:10

編集2019/11/10 10:58
2KOH

総合スコア999

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

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

kannmuri

2019/11/09 08:37 編集

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

2019/11/09 08:12

$.Deferred().resolve().then(function() { と $.when は別物です。 $.when を理解していないと思われますが、その状態で実際のコードを要求するというのは丸投げになります。 自分は丸投げの質問には答えたくありません。 $.when のことがわかっていないのであれば、まず調べてください。 $.when のことを理解したら、方法その2 でコードを書いてみてください。 その過程でわからないことが出てきたら、そのときにその都度わからないことを質問してください。
kannmuri

2019/11/09 08:36

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

2019/11/10 10:35

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

2019/11/10 11:14

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

2019/11/10 12:12 編集

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

2019/11/10 11:58

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

2019/11/10 12:41

ありがとうございました!
kannmuri

2019/11/10 12:44 編集

あとすみません、呼び方としては、 $.Deferred().resolve().then(function() { も $.when も どちらも「コールバック」というものですよね? 他の方から「コールバックを使いましょう」とご回答があるので、「もしかしたら他にコールバックを使った解決方法というのがあるのか?」と気になっているんですけど、質問の時点でコールバックを使ってますよね?
2KOH

2019/11/10 14:01

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

2019/11/10 23:02

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

0

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

投稿2019/11/08 16:28

hentaiman

総合スコア6389

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問