Q:

Waiting for one function to finish before another is executed

I use this code to basically switch to a next row in my datatable, however, I have programmed my app to check for changes and/or save them by prompting the user, before switching to and working with the next row in a datatable.
However, what I don't like about this coding is that the other half of the code is firing before the changes get to be saved at the click of the OK button. How can I get to the onclick function to wait until my RealTimeSave() function is finished writing the changes back to the database and then switch the view to the next row in the datatable?
var table = document.getElementById("data");
var tbody = table.getElementsByTagName("tbody")[0];

tbody.onclick = function(e) {

    if (document.getElementById('data')) {

        if(!document.getElementById('save').disabled) { 

            if (confirm("IMTS has detected unsaved changes, would you like to save the changes now?") == true) {
                RealTimeSave()
            }
        }

    }

    e = e || window.event;
    var td = e.target || e.srcElement
    var row = (td.tagName == "DIV") ? td.parentNode.parentNode : td.parentNode;

    if (ishigh&&ishigh!=row) {
        ishigh.className = ''
    }
    row.className = row.className==="highlighted" ? "" : "highlighted";
    ishigh=row;

    getdata(row)
}

A:

Your question lacks sufficient information, but judging by your description of the problem I assume that RealTimeSave() performs some asynchronous tasks. The best thing you could do would be to alter the callbacks responsible for updating the database (IndexedDB?), but another solution is to wrap your post-update logic in a function expression and pass it as an argument to setTimeout() with the other argument (delay) being 0. Here is an example:
// slightly reorganized the code, feel free to stick with your style

var highlighted;
document.querySelector('#data > tbody').addEventListener('click', function (e) {
  if (!document.querySelector('#save').disabled &&
      confirm('IMTS has detected unsaved changes, ' +
              'would you like to save the changes now?')) {
    realTimeSave(); // this triggers an asynchronous task...
  }

  // ...and so does this, but the task is queued
  setTimeout(function () {
    var target = e.target;
    var row = target.parentNode;
    if (target.tagName === 'DIV') {
      row = row.parentNode;
    }
    if (highlighted && highlighted !== row) {
      highlighted.classList.remove('highlighted');
    }
    row.classList.toggle('highlighted');
    highlighted = row;
    getData(row);
  }, 0);
});

Due to how the event loop works in JavaScript, the function passed as the first argument of setTimeout() will wait until all the messages added before (events and others) have been processed. Note that passing 0 as the delay does not guarantee that the function will execute right away, but you can be sure that the execution will take place after all previously added asynchronous tasks are finished. So, assuming that you are using IndexedDB and your code boilerplate looks like the following:
dbTransaction.oncomplete = function (e) {
  // ...
};
// or
dbRequest.onsuccess = function (e) {
  // ...
};

...using setTimeout() should suffice. If you are, however, connecting to an online database interface via AJAX, then your only option (assuming that promises - mentioned in the other answer - are unavailable) is to hook the AJAX success callback and update your interface logic accordingly.

