仅在第二个按钮上加载AJAX

Question

我试图从TwitchAPI加载AJAX数据。我希望将数据保存在全局变量中，这样我就可以在第一次请求后继续操作，而不是每次都再次调用API，这就是我将对象的属性推送到数组的原因。出于某种原因，当我单击触发AJAX调用的按钮时，没有任何反应。然后，如果我再次按下它，数据会加载并创建一个DIV，其中填写了所有必要的数据。为什么第一次点击时没有数据加载？谢谢！

var test = [];

var streams; 
$("#test").click(function(){
  getData();
  for (i=0; i <test.length; i++){
    title = test[i][0];
    source = test[i][1];
    generateContainers(title, source);
  }
})

function generateContainers(title, source){
    jQuery('<div/>', {
    id: 'foo',
    class: 'test widthSetter',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    html: "'<img src='"+source+"'</img>"+' ' +title,
}).appendTo('#contentHolder');
}

function getData(){
  URL = "https://api.twitch.tv/kraken/streams/featured";
  $.getJSON(URL, function(channel) {
    len = channel.featured.length;
    for (i=0; i <len; i++){
     title = (channel["featured"][i]["title"]);
     source = (channel["featured"][i]["image"]);
     test.push([title,source]);
     //generateContainers(title, source);
    }
  }
);

}