Javascript array.length is 0 until I do an alert()
===

I am trying to write some javascript that builds html controls based on the response from a Sharepoint WebServices getList.  I store the controls in an array.  After building the array, the length is 0 until I perform an alert, then it becomes the right number.

    var controls = [];

    $(document).ready(function() {
        // Make call to WebServices to retrieve list data
        $().SPServices({
            operation:    "GetList",
            listName:     qs["list"],
            completefunc: parseList
        });
        
        console.log(controls.length);           // this outputs 0
        alert("This has to be here to work.");  // this has to be here, no idea why
        console.log(controls.length);           // this outputs 6
        for (var i=0; i<controls.length; i++) {
            controls[i].addControl();
        }
    });
    
    function parseList(xData,status) {
        $(xData.responseXML).find("Field").each(function() {
            if ($(this).attr("ID") && $(this).attr("SourceID") != "http://schemas.microsoft.com/sharepoint/v3") {
                if ($(this).attr("Type") == "Text") {
                    controls.push(new Textbox(this));
                } else if ($(this).attr("Type") == "Choice" && $(this).attr("Format") == "Dropdown") {
                    controls.push(new Dropdown(this));
                } else if ($(this).attr("Type") == "Choice" && $(this).attr("Format") == "RadioButtons") {
                    controls.push(new RadioButtons(this));
                } else if ($(this).attr("Type") == "MultiChoice") {
                    controls.push(new MultiChoice(this));
                } else if ($(this).attr("Type") == "Boolean") {
                    controls.push(new Boolean(this));
                }
            }
        });
    }

Alert seems to be the only thing that makes `controls.length` work properly.  I can only think that this is some sort of scoping problem.  Any insight is appreciated.
