Why does my array appear empty when calling a function after the array is built in JS
<pre><code>// variables to be used throughout
var videos = new Array();

// similar artist/bands
function similarTo(who) {
    $.getJSON('http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&amp;artist='+who+'&amp;limit=20&amp;api_key=b25b959554ed76058ac220b7b2e0a026&amp;format=json&amp;callback=?', function(data) {
        $.each(data , function(i,similars) {
            $.each(similars.artist, function(c, artist) {
                $.getJSON('http://gdata.youtube.com/feeds/api/videos?q='+artist.name+'&amp;orderby=relevance&amp;start-index=1&amp;max-results=1&amp;v=2&amp;alt=json-in-script&amp;callback=?', function(data) {
                    $.each(data.feed.entry, function(i,video) {
                        videos.push({ 
                            id: video.id.$t.split(":")[3], 
                            title: video.title.$t 
                        });
                    });
                });
            });
            initPlaylist();
        });
    });
}

// start the playlist
function initPlaylist() {
    $('#ytplayerid').load('includes/ytplayer.php?track=' + videos[currenttrack].id);
    $('#player span').html(videos[currenttrack].title);
}
</code></pre>

<p>When my code reaches the <code>initPlaylist()</code> function the videos array appears to be empty, I have a feeling its actually being fired before the <code>$.getJSON()</code> call... is this possible? If I add a <em>console.log</em>(videos) after each <code>push()</code> the array is actually being built.</p>
