What is the best to use global variables outside of a callback function?
var icon;
$(function(){
$.get('data.xml', function(xml){
icon = xml.documentElement.getElementsByTagName("icon");
//this outputs a value
console.log(icon);
});
//this is null
//How can this maintain the value set above?
console.log(icon);
});
The code you have provided is perfectly valid -- and, in fact, icon does "maintain" it's value. The problem, likely, is that get() runs asynchronously -- only calling the anonymous function after 'data.xml' has been fully loaded from the server. So the real-world sequence of execution looks something like this:
get('data.xml', function(xml){...}) (starts loading data.xml)console.log(icon) (icon is still null at this point)icon = xml.documentElement.getElementsByTagName("icon").If you want to do something with the value of icon, after the 'data.xml' has been fetched, then you'll need to do it inside the anonymous callback function. Like this:
var icon;
$(function(){
$.get('data.xml', function(xml){
icon = xml.documentElement.getElementsByTagName("icon");
console.log(icon);
});
});
good luck!
Note: you can still use icon from code that is outside the anonymous function, but you'll need to wait to access it, until after the anonymous function has been run. The best way to do this is to put the dependent code into its own function, and then call that function from within the callback function:
var icon;
$(function(){
$.get('data.xml', function(xml){
icon = xml.documentElement.getElementsByTagName("icon");
loadIcon();
});
function loadIcon() {
console.log(icon);
// ... do whatever you need to do with icon here
}
});
addMarkers() function. As shown in their tutorial, google expects the Map objects to be created in the window (or body) load events -- doing otherwise, will produce "strange behavior". Your use of jQuery $(function(){...}), binds your initialization to the DOM load event, which occurs before the window/body load events. Create a new S.O. question, (post a link here so I see it), and I'll help you sort through it.ready(). Also check out the Events Section of the Google Maps v3 API docs -- scroll to the bottom, it shows a google-provided way to hook the window-load event, and call your initialize function: google.maps.event.addDomListener(window, 'load', initialize); This approach should co-exist acceptably with jQuery's various event hooking mechanisms.console.log(icon); won't have a value at that point as you're doing asynchronous ajax. Move your entire code that handles the response in the callback function or functions it calls.
$(function(){
$.get('data.xml', function(xml) {
var icon = xml.documentElement.getElementsByTagName("icon");
console.log(icon);
});
});
The problem is that $.get is queuing a request, but does not execute the request synchronously; it returns immediately. JavaScript is not multi-threaded!
You will have to execute console.log(icon) inside the callback function. At the point that line is being executed, the AJAX call has not completed yet.
The global icon variable will be set from the callback; your code is correct in that regard.
It can help to visualize the code like this.
var icon;
$(function(){
$.get('data.xml', callback); // sends ajax request
// next line happens immediately unless ajax request is set to synchronous
console.log(icon); // logs undefined
});
function callback(xml){ // onsuccess callback happens
icon = xml.documentElement.getElementsByTagName("icon");
console.log(icon); // logs Array
}
I removed the anonymous function and placed the callback after the console.log. Like others have pointed out the ajax callback happens asynchronously, while javascript continues to execute.
