javascript - 为什么多个 $.getJSON 调用不能正常工作？

Question

请看这段代码:

$(document).ready(function() {
        var urls = ['http://en.wikipedia.org/w/api.php?action=query&titles=File:Einstein2.jpg&prop=imageinfo&iiprop=url&iiurlwidth=144&format=json&callback=?', 'http://en.wikipedia.org/w/api.php?action=query&titles=File:Da_Vinci_Vitruve_Luc_Viatour.jpg&prop=imageinfo&iiprop=url&iiurlwidth=144&format=json&callback=?', 'http://en.wikipedia.org/w/api.php?action=query&titles=File:2003-32-GravitationalLens.jpg&prop=imageinfo&iiprop=url&iiurlwidth=144&format=json&callback=?'];
        var x = 0;
        var f = function() {
            x++;
            console.log(x);
        };
        $.getJSON(urls[0], function(json) { f(); } );
        $.getJSON(urls[1], function(json) { f(); } );
        $.getJSON(urls[2], function(json) { f(); } );
    });

这段代码的结果是“1”，而我期待的是“1 2 3”。

我已经看到了解决方案(例如，在 this SO question 中)。但我仍然不明白为什么给定的解决方案应该有效而上面的代码不应该。

添加:当我在 $.getJSON 调用之间放置一些代码或将 console.log() 更改为 alert() 时，输出实际上是“1 2 3”。当这些方法恰好一个接一个地被调用时，在 Chrome 中输出变为“1”。

添加:奇怪的事情。在完全不更改代码的情况下，我仅通过重新加载页面就得到了 3 个不同的输出“1”、“1 2”、“1 2 3”...

Answer 1

你可以尝试像这样嵌套查询

 $.getJSON(urls[0], function(json) { 

    f();

     $.getJSON(urls[1], function(json) { f();

      $.getJSON(urls[2], function(json) { f(); 
      } );

     } );

   } );