How to make javascript wait on the result of Google-apps-script?

Question

I'm trying to display all events on a given date using Google-apps-script, my problem is that the javascript code continues before the script has completed so my code is out of order. How can I make it pause until the script has returned it's result, or is there a better way to do this than am currently doing it?

Javascript:

<script>
 var currentDate = new Date();
 currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
 currentDate = new Date(currentDate.getTime() - currentDate.getTimezoneOffset()*60*1000);

 function formatDate(date){
  //turns date into format "Month DD"
  date = date.toISOString();
  var months =["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var output = months[date.slice(5,7)-1]+" "+date.slice(8,10);
  return output;
 }

 function printEvents(day){
  //retrieve events from google calendar for given day
  google.script.run.withSuccessHandler(onSuccess).listUpcomingEvents(day.toISOString(), (new Date(day.getTime()+24*60*60*1000).toISOString()));
 }

 function printCalendar(date1){
  //print events for three days starting with the given day
  document.getElementById('calendar').innerHTML = formatDate(date1)+"<br />";
  printEvents(date1);
  document.getElementById('calendar').innerHTML += "<br />"+formatDate(new Date(date1.getTime()+24*60*60*1000))+"<br />";
  printEvents(new Date(date1.getTime()+24*60*60*1000));
  document.getElementById('calendar').innerHTML += "<br />"+formatDate(new Date(date1.getTime()+2*24*60*60*1000))+"<br />";
  printEvents(new Date(date1.getTime()+2*24*60*60*1000));
 }

 function onSuccess(events){
  if(events != undefined){
   for (i=0; i<events.length; i++){
    for (j=0; j<3; j++){
     document.getElementById('calendar').innerHTML += events[i][j]+"<br />";
    }
    document.getElementById('calendar').innerHTML += "<br />";
   }
  }
 }

printCalendar(currentDate);


</script>

Google script:

function listUpcomingEvents(dateMin, dateMax) {
  var calendarId = 'primary';
  var optionalArgs = {
    timeMin: dateMin,
    timeMax: dateMax,
    showDeleted: false,
    singleEvents: true,
    maxResults: 1,
    orderBy: 'startTime'
  };
  var response = Calendar.Events.list(calendarId, optionalArgs);
  var events = response.items;
  var calendar = []
  if (events.length > 0) {
    for (i = 0; i < events.length; i++) {
      var event = events[i];
      var when = event.start.dateTime;
      var descr = event.description;
      if (!when) {
        when = event.start.date;
      }
      if (!descr) {
        descr = "NaN"
      }
        calendar.push([event.summary, when, descr]);

    }
    return calendar;
  }
}

function doGet() {
  var output = HtmlService.createTemplateFromFile('calendar');
  return output.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

current result:

"date1"

"date2"

"date3"
"events1"
"events2"
"events3"

expected result:

"date1"
"events1"

"date2"
"events2"

"date3"
"events3"

Answer 1

Solved see comments.

Looks like Promises here perhaps? stackoverflow.com/questions/14220321/… – Mark Schultheiss 28 mins ago

@MarkSchultheiss Thanks, reading up on synchronous and asycnhronous has made me rewrite the code and it works now. I didn't use promises, I used .insertAdjacentHTML() and gave the dates and id to insert it in the right place. – SJ_WTF