Wait for function that makes use of settimeout to complete in javascript before rerunning it

First, you already have done this - but I'd like a working version for demonstration. You can write a recursive function, which calls settimeout on itself after it has finished. For example, given a function which logs out each letter of a string.

var log = function(text, index, duration) {
  console.log(text[index]);

  if (index < text.length - 1) {
    setTimeout(function() {
      log(text, index + 1, duration);
    }, duration);
  }
};

log("Hello There", 0, 1000);
log("Nice to see You", 0, 1000);

Now of course, if you run this code, the second log function will not wait for the first. You can use Promises and/or Callbacks to perform async control flow. First modify the log function to take a callback as a parameter.

var logCB = function(text, index, duration, cb) {
  console.log(text[index]);

  if (index < text.length - 1) {
    setTimeout(function() {
      logCB(text, index + 1, duration, cb);
    }, duration);
  } else {
    cb();  //execute callback
  }
};

Now if you pass your second function (wrapped in another function to delay execution). as a parameter to your first, it will execute after it has finished.

var cb = function() {
  logCB("Nice to see you", 0, 1000);
};

logCB("Hello, World!", 0, 1000, cb);

While this works, it can become unwieldy for multiple nesting. A better solution is to use a promise - you only need to wrap your logCB in another function. Here f is a logCB.

var promiseLog = function(f, text, delay) {
  return new Promise(function(resolve, reject) {
     f(text, 0, delay, resolve);
  });
};

Then ... we can chain them together to wait for completion with .. Then.

promiseLog(logCB, "Hello World", 1000)
 .then(function() {
   return promiseLog(logCB, "Hey There", 1000)
 });

Try creating an array of text values , using Array.prototype.slice() to create copy of initial array of text values ; Array.prototype.shift() to set text parameter for next_letter ; if array has .length after inital call to next_letter , recursively call ProcessText

var arr = ["Hello...", "Some other text"],
  copy = arr.slice(),
  button = document.querySelector("input")
  someControl = document.querySelector("textarea"),
  index = 0;

function ProcessText() {
  next_letter(copy.shift())
}

function next_letter(text) {

  if (index <= text.length) {
    someControl.value = text.substr(0, index++);
    setTimeout(function() {
      next_letter(text);
    }, 50);
  } else {
    index = 0;
    if (!!copy.length) {
      ProcessText()
    } else {
      copy = arr.slice();
    }
  }

}

button.onclick = ProcessText;

<input type="button" value="click" /><br />
<textarea></textarea>