title: Access global variable from XMLHttpRequest onload callback
body: <p>How do I access the <code>globalBuffer</code> variable after setting it in the <code>request.onload</code> callback? I'm learning more about closures, but don't understand why I'm unable to set the value and retrieve it after the fact. In other words, why does <code>console.log(globalBuffer)</code> return <code>undefined</code>?</p>
  
  <pre><code>var globalBuffer;
  var context = new webkitAudioContext();
  
  function loadSound(url) {
      var request = new XMLHttpRequest();
      request.open("GET", url, true);
      request.responseType = "arraybuffer";
  
      request.onload = function() {
          context.decodeAudioData(request.response, function(buffer) {
                  // I want to set globalBuffer and retrieve it outside the function
                  globalBuffer = buffer;
              }    
          );
      }
      request.send();
  }
  
  loadSound("http://upload.wikimedia.org/wikipedia/en/9/9e/Metallica_-_For_Whom_the_Bell_Tolls_%28song%29.ogg");
  
  console.log(globalBuffer);
  </code></pre>
  
  <hr>
  
  <p>Edit:</p>
  
  <p><a href="http://codepen.io/levivoelz/pen/ikICf?editors=001" rel="nofollow">Codepen</a></p>