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

【问题标题】：Why don't multiple $.getJSON calls work properly?为什么多个 $.getJSON 调用不能正常工作？
【发布时间】：2012-01-29 12:00:58
【问题描述】：

请看一下这段代码：

$(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”......

【问题讨论】：

你期待什么结果？你得到什么结果？定义“正常工作”
感谢您的关注，我编辑了问题。
运行该代码的结果是 1 2 3 — jsfiddle.net/njxR7 。您似乎已经生成了一个简化的测试用例，从而将问题减少到了零。
Quentin 是对的……结果是 123……但 1 不一定来自第一个 $.getJSON。见修改示例jsfiddle.net/GG8Uf
我在 Chrome 中每次都得到 1 2 3，使用您的代码的复制/粘贴：jsfiddle.net/Encosia/McYjd。应该没什么区别，但是你用的是什么浏览器？

标签： javascript jquery ajax json getjson

【解决方案1】：

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

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

    f();

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

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

     } );

   } );

【讨论】：

【解决方案2】：

您的示例实际上正在按照您的预期方式运行。在 Firefox 和 Chrome 中，我在控制台输出中看到：

1
2
3

【讨论】：