title: How to return a variable from a $.getJSON function
body: <p>My Question is almost identical to this one: <a href="https://stackoverflow.com/questions/31129/how-can-i-return-a-variable-from-a-getjson-function/1008786#1008786">How can I return a variable from a $.getJSON function</a></p>
  
  <p>There are a number of other duplicates on Stack Overflow and I've read through them but yet to find a satisfactory answer.</p>
  
  <p>I'm aware of the fact $.getJSON runs asynchronously, and I've been writing functions like:</p>
  
  <pre><code>function getSharePriceAtDate(date) {
      $.getJSON(queryString, function(data) {
          $("#share-price-at-date").html(data.values[0][date]);
      });
  }
  </code></pre>
  
  <p>Which is fine, and lets me for example, write the data straight from a JSON source into a HTML document (using the callback to ensure the data has been received before it gets written out).</p>
  
  <p>However, this really isn't what I want to do... I want to be able to call <code>getSharePriceAtDate()</code> from other parts of my code.</p>
  
  <p>For example:</p>
  
  <pre><code>function calcChangeInValue(date) {
      var output = currentSharePrice - getSharePriceAtDate(date);
      return output;
  }
  </code></pre>
  
  <p>For this I really need $.getJSON to run synchronously... I need to be able to create a <code>getSharePriceAtDate(date)</code> function that actually functionally does what it says and returns a specific value from a JSON source, rather than being forced to print to HTML within the callback.</p>
  
  <p>The solution suggested in the question I linked was to rewrite <code>$.getJSON()</code> as the function it's shorthand for <code>$.ajax()</code> and set <code>async = false</code>.</p>
  
  <p>This is more like what I want, but Chrome console gives the following warning:</p>
  
  <blockquote>
    <p>Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check <a href="http://xhr.spec.whatwg.org/" rel="nofollow">http://xhr.spec.whatwg.org/</a>.</p>
  </blockquote>
  
  <p>In my case, I am just grabbing 1 value, and having tested it in this instance, it really isn't that detrimental in any way I can see... (it just means my code will hang until the JSON request comes back, but it would have to anyway! asynchronous or otherwise - I still need that data for the calculation).</p>
  
  <p>So I thought <code>async = false</code> must not be an issue in this case but the link in the warning above says:</p>
  
  <blockquote>
    <p>Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.</p>
  </blockquote>
  
  <p>Which seems like it's saying if I use <code>async = false</code> my code won't be future proof.</p>
  
  <p>Stack Overflow is full of people asking how to use <code>$.getJSON()</code> and the answers usually tell them to make use of the callback.</p>
  
  <p>I'd like to know:</p>
  
  <ol>
  <li>What is the advantage of <code>$.getJSON()</code> being asynchronous in this context?</li>
  <li>How can I access external JSON data in a function that
  returns a value from the JSON?
  (i.e. How can I have something that lets me call <code>var price = getSharePriceAtDate()</code> and have my code wait while <code>price</code> is found)</li>
  </ol>
  
  <p>EDIT: I already know how to do something like <code>getSharePriceAtDate(calculateChangeInValue);</code> the code I'm writing could really do with being able to print out share prices at given dates quite often, I was hoping for a better way</p>