title: How to wait for setTimeout before each function call?
body: <p>I need to call a function multiple times with multiple parameters. I want it to be called after the timeout of the previous call is completed. I've tried the following method but it doesn't seem to be working correctly. (<a href="https://jsfiddle.net/uL5gL152/7/" rel="nofollow noreferrer">Here's the JSFiddle</a>). </p>
  
  <p>Right now it is only waiting after first call. I know it's not the correct way to do this, but I could not find any examples that correctly showed how to do. I will also need to convert it to <code>typescript</code>, so please consider that while answering.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;p&gt;Click the button to wait 3 seconds, then alert "Hello".&lt;/p&gt;
  
  &lt;button onclick="call()"&gt;Call all methods&lt;/button&gt;
  
  &lt;script&gt;
  var myVar;
  
  function call(){
  myFunction('normal1','heading1','message1');
  myFunction('normal2','heading2','message2');
  myFunction('normal3','heading3','message3');
  
  /*Output should be:
  (first time dont wait)
  heading1 message1
  (then wait for timeout and remove the elements)
  heading2 message2
  (then wait for timeout and remove the elements)
  heading3 message3
  */
  }
  
  function myFunction(msgType,heading,message) {
  console.log(!!document.getElementById("snackbarParent"),document.getElementById('snackbarParent'));
      if(document.getElementById("snackbarParent") == null)
      {
          alertFunc(msgType,heading,message);
      }
      else{
          setTimeout(function(){
          let parent = document.getElementById('snackbarParent');
              parent.parentNode.removeChild(parent);
              alertFunc(msgType,heading,message);
          },3500);
      }
  }
  
  function alertFunc(msgType,heading,message) {
  
      let div = document.createElement('div');
          div.className = 'snackbarParent';
          div.id = "snackbarParent";
          div.innerHTML = '&lt;div id="snackbar"&gt;&lt;b style="color:' + msgType + '"&gt; ' + heading + ' &lt;/b&gt;' + message + '&lt;/div&gt;';
  
          document.documentElement.appendChild(div);
          // Get the snackbar DIV
          let x = document.getElementById("snackbar");
  
          // Add the "show" class to DIV
          x.className = "show";
      setTimeout(function(){
          x.className = x.className.replace("show", "");
          alert("Should display "+heading+" "+message+" now!");
      }, 3000);
  
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>Note:</h2>
  
  <p>The function call() is just for representation purposes. The parameters can have any value and the function myFunction() can be called anytime, anywhere.</p>