How to update an HTML table after writing form data to the spreadsheet?

I have a web page, which contains a form and an html table.

1. The user fills out the form;
2. Clicks on +;
3. A client side function prepares the data and have google.script.run.newTask(dataSet); pass the data to the server-side
4. Another function gets it, makes a tweak or two and writes it to the spreadsheet;
5. Run another function that builds that HTML table, bringing the latest data just written

There are not errors, but the table is not built. Do I have to use setTimeout() or something that makes the last function wait for the previous ones to finish?

Here's the client side function:

function addTaskToSheet() {
  var formElements = document.getElementById("form").elements;
  var postData = [];
  for (var i = 0; i < formElements.length; i++) {
    if (formElements[i].type != "submit" && formElements[i].type != 'checkbox') { //we dont want to include the submit-buttom
      postData.push(formElements[i].value);
    } else if (formElements[i].type == 'checkbox' && formElements[i].checked == true) {
      postData.push(formElements[i].checked);
    } else if (formElements[i].type == 'checkbox' && !formElements[i].checked) {
      postData.push('false');
    }
  }

  let timeStamp = new Date();
  timeStamp = timeStamp.toString();
  const agencyPartner = document.getElementById('agencySelect');
  const selectedAgency = agencyPartner.options[agencyPartner.selectedIndex].text;

  const client = document.getElementById('clientSelect');
  const selectedClient = client.options[client.selectedIndex].text;
  
  let dateAssigned = postData[1].toString();
  const item = postData[0];
  const link = postData[2];
  const notes = postData[3];
  const requestApproval = postData[4];

  let dataSet = [];
  dataSet.push(timeStamp, selectedAgency, selectedClient, '', '', dateAssigned, item, link, notes, '', requestApproval, '', '', '')
  console.log(dataSet)
  google.script.run.newTask(dataSet);
  setTimeout(loadClientTasks(selectedClient), 3000);
}

If another function of Run another function that builds that HTML table, bringing the latest data just written is loadClientTasks, how about the following modification?

From:

google.script.run.newTask(dataSet);
setTimeout(loadClientTasks(selectedClient), 3000);

To:

google.script.run.withSuccessHandler(_ => loadClientTasks(selectedClient)).newTask(dataSet);

• By this modification, loadClientTasks(selectedClient) is run after newTask(dataSet) was finished.

Note:

• If you are required to use setTimeout, in the case of setTimeout(loadClientTasks(selectedClient), 3000), loadClientTasks is run soon because of (selectedClient) of loadClientTasks(selectedClient). In this case, how about the following modification?

  • To

      google.script.run.newTask(dataSet);
      setTimeout(loadClientTasks.bind(undefined, selectedClient), 3000);
    

  • or, if you are required to wait after newTask was finished, how about the following modification?

      google.script.run.withSuccessHandler(_ => setTimeout(loadClientTasks.bind(undefined, selectedClient), 3000)).newTask(dataSet);
    

Reference:

• withSuccessHandler(function)