CATEGORY
jQuery
【jQuery】Ajax(非同期)で複数のページから取ってきたデータの順番①

3,969 PV
つい最近 Ajax の非同期通信で、いくつかのページから取ってきたデータを
取ってきた順に並べようとして、色々試した時のメモ。jQuery 使用。
1. まず簡単に for で回してみた。
script
<script>
var urls = ['/instagram/201701/1112',//【Instagram】カレーさいこー♪
'/instagram/201611/1051',//【Instagram】もう冬の空。
'/instagram/201611/916'];//【Instagram】福岡。
var num = urls.length;
for(var i = 0;i < num; i++){
$.ajax({
url: urls[i],
type: 'get',
dataType: 'html'
}).done(function(data){
var name = $(data).find('h1').text();
$('#result1').append( i + ':' + name + '<br>');
}).fail(function(data){
$('#result1').append('ERROR<br>');
});
}
</script>
result
結果発表
あら?えっと、順番を表示するつもりのi
が常に振りきっとる?
おまけに発動する度に表示される順番が変わるんですがw
見事に失敗したようなので、ちょっとネットを探ってみます。
2. $.ajax を function でラップするといいらしい
script
<script>
var urls = ['/instagram/201701/1112',//【Instagram】カレーさいこー♪
'/instagram/201611/1051',//【Instagram】もう冬の空。
'/instagram/201611/916'];//【Instagram】福岡。
var num = urls.length;
for(var i = 0;i < num; i++){
var count = i;
(function(i){
$.ajax({
url: urls[i],
type: 'get',
dataType: 'html'
}).done(function(data){
var name = $(data).find('h1').text();
$('#result2').append( i + ':' + name + '<br>');
}).fail(function(data){
$('#result2').append('ERROR<br>');
});
})(count);
}
</script>
こんな感じかな?
ソースはこちら。
result
結果発表
おぉ、ちゃんと結果とi
が結びついとる!
でも結果が返されるタイミングは相変わらずバラバラなまんまですなー。
ぐぬぬぬ。。。順序も担保してもらいたいんだよなー。
あ、1 つ目の URL→完了→ 2 つ目の URL →完了→ 3 つ目の・・・・
といった感じでやれば、思い通りの結果が得られるはず!
たしかwhen()
とかdone()
とかそのあたり。
というわけで、次回は一個ずつ処理をして吐き出す方式を試してみます。
CATEGORY : jQuery