Javascript/jQuery 变量未给出预期值

Question

和我之前的其他人一样，我也在 Javascript 的范围内苦苦挣扎。 (那并试图阅读该死的东西)。我已经检查了关于这个问题的一些先前的线程，但我似乎无法让它们正确地应用于我的问题。在下面的示例中，我想在数组完全填充后操作 tagsArr 数组中的值。我在填充变量的函数范围之外声明了 tagArr 变量，以便全局访问它。但该变量似乎没有达到我期望的范围 - 在我在第 16 行将其输出到控制台时，tagsArr.length 为 0。

            $(function(){
            var apiKey = [myapikey];
            var tags = '';
            var tagsArr = new Array();
            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=46206266@N05&extras=date_taken,tags&format=json&jsoncallback=?', function(data){
                $.each(data.photos.photo, function(i, item) {
                    var photoID = item.id;
                    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data){
                        if (data.photo.tags.tag != '') {
                            $.each(data.photo.tags.tag, function(j, item) {
                                tagsArr.push(item.raw);
                            });
                        }                            
                    });
                    tags = tagsArr.join('<br />');
                    console.debug(tagsArr.length);
                });
                $('#total-dragged').append(data.photos.total);
                $('#types-dragged').append(tags);
            });
        });

Answer 1

您对 getJSON 的调用是异步的。因此，当到达 console.debug 行时，对内部 getJSON 的所有调用仍然未完成。因此数组长度仍然是0。

最终 getJSON 调用完成后，您需要运行一些额外的代码。

        $(function(){ 
        var apiKey = [myapikey]; 
        var tags = ''; 
        var tagsArr = new Array(); 
        $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=46206266@N05&extras=date_taken,tags&format=json&jsoncallback=?', function(data){

            var totalExpected = data.photos.total;
            var totalFetched = 0;

            $.each(data.photos.photo, function(i, item) { 
                var photoID = item.id;

                $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data){ 
                    if (data.photo.tags.tag != '') { 
                        $.each(data.photo.tags.tag, function(j, item) { 
                            tagsArr.push(item.raw);
                            totalFetched += 1;
                            if (totalFetched == totalExpected)
                              fetchComplete();
                        }); 
                    }                             
                });
                function fetchComplete()
                { 
                    tags = tagsArr.join('<br />'); 
                    console.debug(tagsArr.length); 
                }
            }); 
            $('#total-dragged').append(data.photos.total); 
            $('#types-dragged').append(tags); 
        }); 
    });

假设照片总数不超过每页默认的 100 张，此功能有效，否则您需要对其进行调整。

也就是说，我不认为使用 .each 来触发 getJSON 请求负载有很大意义。我会重构它，以便任何时候只有一次对 getJSON 的调用是未完成的。让一个问题的回调用于下一张照片的下一个 getJSON，直到所有内容都被拉出，然后执行您完成的代码。