How to return the response from an asynchronous function?

How to return the response from multiple asynchronous function calls?

• I have a function where I do multiple asynchronous function calls. handleData function returns a Json object. I need to use these different Json objects in the draw method. Any idea how to pass result values to the draw method? I would appreciate any help. Here is my code: var publicationData = new Array(); var researchers = []; var year = []; var title = []; var pub = []; var dataJson = []; callServerAsync(); function callServerAsync(){ $.get('Year2014.html').then(function(responseData) { var result1 = handleData(responseData, dataJson); }); $.get('tauchi_publications.html').then(function(responseData) { var result2 = handleData(responseData, dataJson); }); //TO-DO //draw(result1, result2); } function handleData(responseData, dataJson){ var htmlObject = document.createElement('div'); htmlObject.innerHTML = responseData; pub = htmlObject.getElementsByClassName("julkaisu"); getPublicationData(pub); getResearchersYearTitle(publicationData); dataJson = createJson(researchers,year,title); return dataJson; } function draw(result1,result2){ result1.concat(result2); }

• Answer:

  Use promises! jQuery's $.get returns a promise for its return value. jQuery contains a $.when method for waiting for multiple deferreds. function callServerAsync(){ var p1 = $.get('Year2014.html').then(function(responseData) { return handleData(responseData, dataJson); }); var p2 = $.get('tauchi_publications.html').then(function(responseData) { return handleData(responseData, dataJson); }); // the `return` here is just for good measure return $.when(p1, p2).then(function(result1, result2){ // all your data available, can use it here. // It's in the function arguments draw(result1, result2); }); }