Calling Javascript Functions In Order

I'm trying to use a button to perform an API Call to Flickr, like so:

$(document).ready(function (){
    $('#goButton').click(function (){
         makeAPICall();
    });
});

This works as expected, but the communication between the client and the Flickr API takes a while to execute, so the page appears like it is hung. I would like to add a "Working Notice" that is displayed immediately on button click to let the user know that their action is processing.

To do this, I added an H1 tag:

<h1 id="notice"></h1>

and a function that changes the inner HTML to display a notice:

function workingNotice() {
    document.getElementById("notice").innerHTML="I am getting your results";
}

But when I try to edit the code for the button to something like this:

$(document).ready(function (){
    $('#goButton').click(function (){
         workingNotice();
         makeAPICall();
    });
})

The Working Notice is never displayed until the API Call has completed, which defeats the purpose.

I then tried using:

$(document).ready(function (){
    $('#goButton').click(function (){
         $.when(
             workingNotice()
         ).then(
             makeAPICall()
         );
    });
})

This gives the exact same results, where the Working Notice is not called until the API Call completes. Is there any alternative that I can try to force the order of these functions to comply?

UPDATE/EDIT:

While I found the solution to the initial problem in another answer, I know there's a reasonable chance the delay in the API Call processing is due to some mistake in this function. Here is the code for makeAPICall:

//call Flickr api and look for tags matching user search term
function makeAPICall(){

//get value tag from team 1 search box
var searchTag1 = escape(document.getElementById("searchTag1").value);
//get value tag from team 2 search box
var searchTag2 = escape(document.getElementById("searchTag2").value);

//build api call url with searchTag1
var url1 = "http://api.flickr.com/services/rest/?" 
            + "method=flickr.photos.search&api_key=XXX&tags=" 
        + searchTag1 + "&sort=interestingness-desc" 
                + "&safe_search=1&has_geo=1&format=json&nojsoncallback=1";
//build api call url with searchTag1
var url2 = "http://api.flickr.com/services/rest/?"
                + "method=flickr.photos.search&api_key=XXX&tags=" 
        + searchTag2 + "&sort=interestingness-desc"
                + "&safe_search=1&has_geo=1&format=json&nojsoncallback=1";

//make call to flickr api
$.when(
    $.ajax({
      dataType: "json",
      url: url1,
      async: false,
      success : function(callReturn1) {
        callData1 = callReturn1;
        numResults1 = parseInt(callData1.photos.total);
      }
    }),
    $.ajax({
      dataType: "json",
      url: url2,
      async: false,
      success : function(callReturn2) {
        callData2 = callReturn2;
        numResults2 = parseInt(callData2.photos.total);
      }
    })
).then(
    drawChart()
);

}

Note "callData1", "callData2", "numResults1" & "numResults2" are all global.