여러 $ .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). 하지만 여전히 주어진 솔루션이 작동해야하는 이유와 위의 코드가 왜 안되는지 이해할 수 없습니다.

ADDED : 나는 $ .getJSON 사이에 몇 가지 코드를 넣어 호출 또는 변경을 console.log()가 (경고)는, 출력은 정말 "1 2 3"입니다. 이 메소드를 정확히 서로 호출하면 Chrome 출력이 '1'이됩니다.

추가 : 이상한 것. 코드를 전혀 바꾸지 않고 페이지를 다시 불러 와서 "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(); 
     }); 

    }); 

    }); 

Answer 2

예제가 실제로 의도 한대로 작동하고 있습니다. 파이어 폭스와 크롬 모두에서 내 콘솔 출력에서 ​​볼 :

1 
2 
3