title: How to make sure that a JS function is finished running before executing the next callback function with own setTimeOut?
body: <p>I have a multiple callback functions with own setTimeOut values. And when I try to run one after another sequentially the one with the shortest setTimeOut value is rendered first even when it's called the latest. </p>
  
  <p>There are similar questions (like <a href="https://stackoverflow.com/questions/5187968/how-should-i-call-3-functions-in-order-to-execute-them-one-after-the-other">this</a>, <a href="https://stackoverflow.com/questions/12116505/wait-till-a-function-with-animations-is-finished-until-running-another-function/32732882#32732882">this</a> and <a href="https://stackoverflow.com/questions/42352146/understanding-javascript-promise-used-with-settimeout-and-setinterval">this</a>), but their answers do not work when each function has own internal setTimeout value. </p>
  
  <p>What would be the best way (using pure JS) to force the functions wait (or make sure the previous one finished running) until the previous one is finished, without using additional setTimeOut?</p>
  
  <p>Code:</p>
  
  <pre><code>function NumSequences(){};
  
  NumSequences.prototype.one = function one(callback) {
   setTimeout(function() {
     callback()
     console.log('one');
   }, 1000);
  };
  
  NumSequences.prototype.two = function two(callback) {
   setTimeout(function() {
     callback()
     console.log('two');
   }, 500);
  };
  
  NumSequences.prototype.three = function three(callback) {
   setTimeout(function() {
     callback()
     console.log('three');
   }, 200);
  };
  var numSequences = new NumSequences();
  
  function countNow(){};
  
  var promise = new Promise(function(resolve) {
     resolve(numSequences.one(countNow));
  });
  
  promise.then(function() {
    return numSequences.two(countNow);
  }).then(function() {
    return numSequences.three(countNow); 
  });
  </code></pre>
  
  <p>result:</p>
  
  <pre><code>three //coming first because the function three has the shortest setTimeout value
  two 
  one //coming at last despite being called first
  </code></pre>
  
  <p>And result should be:</p>
  
  <pre><code>one
  two 
  three
  </code></pre>
  
  <p>Link to <a href="https://jsbin.com/kegihososi/edit?html,js,console" rel="nofollow noreferrer">JSBin</a> </p>