0

ループを使用して Instagram API への呼び出しをいくつか実行しましたが、理解できない奇妙な結果が得られました。

for(var i = 0; i < tags.length; i++){

    document.write('search: ' + i + 'round');
    document.write(tags[i] + ' ');
    document.write('<hr />');
    var url = 'https://api.instagram.com/v1/tags/'+ tags[i] +'/media/recent?&client_id=5a7b13571ced47418dd539e6fc97a67f&count='+count+'&callback=?';

    $.getJSON(url, function(data) {
        console.log(data.data.length);

        if(data.data.length === 0){
            //$('ul.images').append('<li>No results</li>');

        } else {

            $.each(data.data, function(index, value){
            //console.log(value);
                var imgUrl = value.images.low_resolution.url,
                imgUser = value.user.username,
                imgLink = value.link;
                it.push(imgLink);

                document.write(value.link + '<br />');
                //$('ul.images').append('<li><a href="'+imgLink+'" target="_blank"><img src="'+imgUrl+'"/></a></li>');
            });
        }
        document.write('---------------------'  + '<br />');
    });
}

cat、dog、pig の 3 つのタグを検索すると、結果は次のようになります。

search: 0roundcat
search: 1rounddog
search: 2roundpig

5 instagram image links
---------------------

5 instagram image links
---------------------

5 instagram image links
---------------------

document.write()したがって、最初に3つのステートメントをループしてから、ステートメントに入る$.getJSON()ようです。

何かご意見は？

4

1 に答える 1

1

「i + round + tag」の出力がリンク付きの出力の前に来る理由について質問がある場合getJSON()、それは非同期であるためです。つまり、リクエストを開始してすぐに戻ります。その後、forループが終了し、実行がイベント ループに戻り、非同期要求の結果が到着すると、到着した順に出力されます。

これを回避するにはいくつかの方法があります。1 つは次のようなものです。

var tags = ['cat','dog','pig'];
function start_next_request() {
  var tag = tags.shift();
  var url = ...
  $.getJSON(url, function (data) {
    ...
    start_next_request();
  }
}
start_next_request();
于 2012-09-23T19:45:44.747 に答える