質問編集履歴
4
インデント等を調整
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
|
|
122
122
|
/*
|
|
123
123
|
【変更➀】
|
|
124
|
-
この部分を myFadeOut() と関数化し、
|
|
124
|
+
この部分を myFadeOut() と関数化し、getAjaxData() の場所に書いてみました
|
|
125
125
|
$('section').fadeOut(1000, function(){
|
|
126
126
|
var html = getHtml(area);
|
|
127
127
|
$('section').html(html);
|
3
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
```
|
|
29
29
|
```jQeury
|
|
30
30
|
$('button').click(function(){
|
|
31
|
-
|
|
31
|
+
const area = $(this).attr('data-area');
|
|
32
|
-
|
|
32
|
+
Pjax(area);
|
|
33
33
|
});
|
|
34
34
|
|
|
35
35
|
function Pjax(area){
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
// 表示切替
|
|
43
43
|
$('body').append('<p class="loading">loading</p>')
|
|
44
44
|
$('section').fadeOut(1000, function(){
|
|
45
|
-
|
|
45
|
+
var html = getHtml(area);
|
|
46
|
-
|
|
46
|
+
$('section').html(html);
|
|
47
47
|
});
|
|
48
48
|
|
|
49
49
|
$.Deferred().resolve().then(function() {
|
|
@@ -71,11 +71,11 @@
|
|
|
71
71
|
function getHtml(area){
|
|
72
72
|
let html;
|
|
73
73
|
if( area == 'one' ){
|
|
74
|
-
|
|
74
|
+
html = `<div data-area="one"></div>`;
|
|
75
|
-
|
|
75
|
+
}
|
|
76
76
|
else if( area == 'two' ){
|
|
77
|
-
|
|
77
|
+
html = `<div data-area="two"></div>`;
|
|
78
|
-
|
|
78
|
+
}
|
|
79
79
|
return html;
|
|
80
80
|
}
|
|
81
81
|
```
|
|
@@ -88,4 +88,94 @@
|
|
|
88
88
|
|
|
89
89
|
以上２点からAjaxの処理速度が原因だ！と思い込んでいますが、もしかしたら他の原因かもしれません。
|
|
90
90
|
|
|
91
|
-
どうすればAjaxの処理速度にかかわらず、実現したい順番で処理できるでしょうか。
|
|
91
|
+
どうすればAjaxの処理速度にかかわらず、実現したい順番で処理できるでしょうか。
|
|
92
|
+
|
|
93
|
+
###試したこと（追記）
|
|
94
|
+
ご回答の中に
|
|
95
|
+
`$.Deferred().resolve().then(function() {`ではなく
|
|
96
|
+
`$.when()`を使えとのアドバイスを頂きました。
|
|
97
|
+
|
|
98
|
+
その理由として自分なりに推測したのは、
|
|
99
|
+
|
|
100
|
+
3．`<div>`に「Ajaxデータ」を挿入
|
|
101
|
+
のために待たなければならない処理が
|
|
102
|
+
|
|
103
|
+
1．`<section>`を`fadeOut()`
|
|
104
|
+
2．`<section>`に`<div>`を挿入
|
|
105
|
+
と２つあり、
|
|
106
|
+
|
|
107
|
+
そのように複数の処理を待つ場合は`$.Deferred().resolve().then(function() {`では対応できないためだと考えました。
|
|
108
|
+
|
|
109
|
+
以上のように考え、修正したのが次のコードです。【変更➀】と【変更➁】が上の推測に沿った修正になります。
|
|
110
|
+
|
|
111
|
+
```jQeury
|
|
112
|
+
$('button').click(function(){
|
|
113
|
+
const area = $(this).attr('data-area');
|
|
114
|
+
Pjax(area);
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
function Pjax(area){
|
|
118
|
+
|
|
119
|
+
// 表示切替
|
|
120
|
+
$('body').append('<p class="loading">loading</p>');
|
|
121
|
+
|
|
122
|
+
/*
|
|
123
|
+
【変更➀】
|
|
124
|
+
この部分を myFadeOut() と関数化し、26行目の getAjaxData() の場所に書いてみました
|
|
125
|
+
$('section').fadeOut(1000, function(){
|
|
126
|
+
var html = getHtml(area);
|
|
127
|
+
$('section').html(html);
|
|
128
|
+
});
|
|
129
|
+
*/
|
|
130
|
+
|
|
131
|
+
/*
|
|
132
|
+
【変更➁】
|
|
133
|
+
２つの処理完了を待つため $.when().done() に変更しました
|
|
134
|
+
*/
|
|
135
|
+
$.when(
|
|
136
|
+
myFadeOut(area,1000), getAjaxData(100)
|
|
137
|
+
)
|
|
138
|
+
.done(function(ajaxData) {
|
|
139
|
+
console.log(ajaxData);
|
|
140
|
+
$('body').find('.loading').remove();
|
|
141
|
+
$('section').find('div[data-area="'+area+'"]').html('<p>'+ajaxData+'</p>');
|
|
142
|
+
$('section').fadeIn(1000, function(){
|
|
143
|
+
//history.pushState(location.href);
|
|
144
|
+
});
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// 【変更➀】の関数
|
|
149
|
+
function myFadeOut(area,dalution){
|
|
150
|
+
const d = new $.Deferred;
|
|
151
|
+
$('section').fadeOut(dalution, function(){
|
|
152
|
+
var html = getHtml(area);
|
|
153
|
+
$('section').html(html);
|
|
154
|
+
d.resolve();
|
|
155
|
+
});
|
|
156
|
+
return d.promise();
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
function getAjaxData(delay){
|
|
160
|
+
const d = new $.Deferred;
|
|
161
|
+
setTimeout(function(){ // テストのためAjaxの代わりにsetTimeOut
|
|
162
|
+
const ajaxData = 'Ajaxデータ';
|
|
163
|
+
d.resolve(ajaxData);
|
|
164
|
+
}, delay);
|
|
165
|
+
return d.promise();
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
function getHtml(area){
|
|
169
|
+
let html;
|
|
170
|
+
if( area == 'one' ){
|
|
171
|
+
html = `<div data-area="one"></div>`;
|
|
172
|
+
}
|
|
173
|
+
else if( area == 'two' ){
|
|
174
|
+
html = `<div data-area="two"></div>`;
|
|
175
|
+
}
|
|
176
|
+
return html;
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
ですが、、これでもできず、再び限界になりここに追記させて頂きました。
|
|
180
|
+
|
|
181
|
+
解決できる方がいらっしゃいましたらご回答頂けましたら幸いです。
|
2
タイトル訂正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Ajax
|
|
1
|
+
Ajaxでタイミングが整合できず…
|
body
CHANGED
|
File without changes
|
1
リンク訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
問題は★の数値（jsfiddleでいう21行目）で、これがAjaxの処理速度（つまりsetTiemout速度）を示すのですが、もし`fadeOut()`より早い場合に問題が生じます。
|
|
18
18
|
|
|
19
|
-
???? [https://jsfiddle.net/
|
|
19
|
+
???? [https://jsfiddle.net/v8pmcsak/](https://jsfiddle.net/v8pmcsak/)
|
|
20
20
|
```HTML
|
|
21
21
|
<main>
|
|
22
22
|
<section>
|