Javascript and JQuery array variables [duplicate]

I'm having trouble using an array within javascript that I build from a jquery ajax call. I can create the array, and know it exists in the jquery function because I can log it in the browser console.I am not picking it up after the function runs though, as it comes back as undefined after the crews = loadCrews() line. Here's my main javascript file:

$(document).ready(function(){
     var crews = [];
    console.log("loading crews")
    crews = loadCrews();
   console.log(crews);

 $('#datetimepicker1').datetimepicker({
     pickTime: false
    });
 $('#datetimepicker2').datetimepicker({
       pickTime: false
    });

 $("#input_form").submit(function(){

     console.log(crews)
     var querystring = $(this).serialize();
             alert(querystring)
     return false;
         });

});

function loadCrews(){
 $.getJSON( "url", function( data ) {
    var items = [];
  $.each( data, function( key, val ) {
    items.push(val.UNID);
        })
     console.log(items)
    return items
 });   

};

Update 1: I've employed callbacks on the ajax request and it is starting to make sense. Thanks for all the good reads. Unfortunately I still can't pass back my array, even after using the .done callback.

Here's the updated code:

$(document).ready(function(){

        loadCrews();

 $('#datetimepicker1').datetimepicker({
     pickTime: false
    });
 $('#datetimepicker2').datetimepicker({
       pickTime: false
    });

 $("#input_form").submit(function(){
     var querystring = $(this).serialize();
             alert(querystring)

     return false;
         });

});

function loadCrews(){
    var url =  //url of service for all crew names
$.getJSON( url)
  .done(function( data ) {
      var crews = [];
    $.each( data, function( key, val ) {
        crews.push(val.UNID);
        })
    console.log(crews)
    return crews

  })
  .fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
});
};