Javascript 在第二个按钮上加载AJAX只需单击

我正在尝试从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);
    }
  }
);

}

var测试=[]；
var流；
$（“#测试”）。单击（函数（）{
getData（）；
对于（i=0；我假设您的问题与AJAX的异步性质有关。for循环可能在AJAX调用完成之前运行，因此在空数组上循环。第二次按下按钮时，数组是从上一次调用填充的，因此它实际上创建了元素。这是有意义的。但是如何修复它？删除单击函数中的for循环和取消对generateContainers行的注释应该可以做到这一点。我假设您的问题是AJAX的异步性质。for循环可能在AJAX调用完成之前运行，因此在空数组上循环。第二次按下按钮时，数组将从上一个c填充全部，所以它实际上创建了元素。这很有意义。但是我如何修复它呢？从click函数中删除for循环，并取消对generateContainers行的注释