jQuery / JavaScript 变量范围

Question

 var field1;
 var field2;   
     function setUserFields() {
            $.ajax({
                type: "POST",
                url: "url",
                dataType: "xml",
                complete: parseXml
            });   
     } 
    function parseXml {
      $(xml.responseXML).find("myValue").each(function()
      {
          field1 = $(this).attr('attr1');
          field2 = $(this).attr('attr2');
          alert(field1 + ' ' field2); //shows correct values
      });
    }
 setUserFields();    

$(function() {
     alert(field1); //undefined in IE and Chrome | Gives correct value in FireFox
     alert(field2); //undefined in IE and Chrome | Gives correct value in FireFox
})

I am not posting the exact code that I am running since the code is fairly complex. If there are syntax errors in the code posted please disregard them as these are not the cause of my problem. The code works as expected in Firefox but not IE or Chrome. Also, I can verify in Firebug lite that the order the code runs shouldn't be causing a problem. What I am trying to do is call a web service, parse the results and store the needed information in a global variable for use in later functions that I can only call after the DOM is finished loading. I run the setUserFields function before the document is loaded. The function gets called and sets the variables but the variables are only available in the scope of parseXML() . Since I have declared the variables outside the scope of all of the functions and am setting the variables inside the parseXML function I would expect that the variables would be set globally. However, only in firefox can I access the variables without them being undefined. I am pretty new to the javascript arena so I may be missing an obvious pitfall. I tried googling for a few hours without any luck. Any help would be greatly appreciated.

Answer 1

This is not a scope issue. This might be due to the asynchronous nature of AJAX calls.

The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

jQuery.ajax()

Answer 2

This is mostly a timing issue.

Your AJAX code is not getting executed by the time you call these variables

 alert(field1); //undefined in IE and Chrome | Gives correct value in FireFox
 alert(field2); /

To fix the problem make the AJAX call in the document. Ready and after that you can alert filed1 and field2 ,

I am very sure this is the timing issue due to the asynchronous nature of AJAX.