title: javascript: executing order of function - nested function return value before function finishes processing?
body: <p>I'm just learning JavaScript, and it seems there is a lot of information for folks like me about the way it processes functions asynchronously.</p>
  
  <p>While I am still trying to get my head around this, I find myself struggling with some sharepoint csom because of what I am trying to do. Perhaps I am just going about this completely wrong, but as I said, just learning.</p>
  
  <p>Trying to use SP CSOM to get list data like this:</p>
  
  <pre><code>getGridData() {
      var gridURL = "https://mySite/ListData.svc/Projects";
      var request = new Sys.Net.WebRequest();
      request.set_httpVerb("GET");
      request.set_url(gridURL);
      request.get_headers()["Accept"] = "application/json";
      request.add_completed(onCompletedProjectCallback);
      request.invoke();
  }
  
  onCompletedProjectCallback(response, eventArgs) {
        var getProject = eval("(" + response.get_responseData() + ")");
        var buildMarkUp = '';
        for (var i = 0; i &lt; getProject.d.results.length; i++)  {
           buildMarkUp += "&lt;div&gt;" + getProject.d.results[i].ProjectName + "&lt;/div&gt;";
        }
  }
  </code></pre>
  
  <p>This works great.</p>
  
  <p>I do know about other methods such as spservices, but I like this as it seems to be faster for me and returns JSON which is preferable.</p>
  
  <p>What happens when I want to use the <code>ProjectID</code> in the above to call another function and pass the id in order to get related values from a list.</p>
  
  <p>However, I want to build the <code>buildMarkUp</code> string in order before it gets appended to the DOM(oh yeah jQuery btw). Something like this might be totally wrong, but it is what I was trying to do:</p>
  
  <pre><code>onCompletedProjectCallback(response, eventArgs) {
        var getProject = eval("(" + response.get_responseData() + ")");
        var buildMarkUp = '';
        for (var i = 0; i &lt; getProject.d.results.length; i++)  {
           buildMarkUp += "&lt;div&gt;" + getProject.d.results[i].ProjectName + "&lt;/div&gt;";
  
        //call nested function here so that I can go retrieve values for each ProjectID from another list
         var getOtherData = getRelatedData(getProject.d.results[i].ProjectID);
        }
  }
  
  
  getRelatedData(passedProjectID) {
       // have to use the same method as the original to get more sharepoint list data
        var relatedURL = "https://mySite/ListData.svc/Related$filter=ProjectID eq " + passedProjectID;
      var request = new Sys.Net.WebRequest();
      request.set_httpVerb("GET");
      request.set_url(relatedURL);
      request.get_headers()["Accept"] = "application/json";
      request.add_completed(onCompletedRelatedCallback);
      request.invoke();
  }
  </code></pre>
  
  <p>This is where I am really struggling with this though.</p>
  
  <p>A separate callback means it is not going back to the original function with data if I return right?<br>
  Does the original function keep processing and just fire the nested functions?<br>
  How can I control when/how/what values are returned to the original function then? Can I?</p>
  
  <p>Basically what if I was trying to build a table, where each referenced project row contained data from other sharepoint lists, and I would need to control the order in which the string that I was going to append to the DOM got built?</p>