title: How can javascript create a chain of events in a function, so one function does not start until another is completed?
body: <p>Working on code for personal site and I'm trying to rewrite code that is on the Internet so it's even easier to use for me.  </p>
  
  <p>The code is from <a href="http://cssdeck.com/labs/7bx7mmcm" rel="nofollow noreferrer">http://cssdeck.com/labs/7bx7mmcm</a></p>
  
  <p>How would it be possible to add a marker so that after fileToLoad.click(); is pushed through and completed, then loadFileAsText() goes?  Much thanks in advance!</p>
  
  <pre><code>&lt;textarea id="BoxText4Load"&gt;&lt;/textarea&gt;
  &lt;input type="file" id="fileToLoad" class="hidden"&gt;
  &lt;button id="loader"&gt;Loader&lt;/button&gt;
  &lt;input id="inputFileNameToSaveAs" style="display: none;"&gt;&lt;/input&gt;
  &lt;button onclick="saveTextAsFile()"&gt;Save file&lt;/button&gt;
  
  var loaderbutton = document.getElementById("loader");
  loaderbutton.addEventListener('click', function(event){
  fileToLoad.click();
  setTimeout(function() {loadFileAsText(); }, 3000);
  } , false)
  </code></pre>
  
  <p>Code below directly is from above link:</p>
  
  <pre><code>"inputFileNameToSaveAs"
  
  function saveTextAsFile(){
  var textToWrite = document.getElementById("BoxText4Load").value;
  var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
  var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
  
  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.URL != null)
  {
  // Chrome allows the link to be clicked
  // without actually adding it to the DOM.
  downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
  }
  else
  {
  // Firefox requires the link to be added to the DOM
  // before it can be clicked.
  downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
  downloadLink.onclick = destroyClickedElement;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  }
  
  downloadLink.click();
  }
  
  function destroyClickedElement(event)
  {
  document.body.removeChild(event.target);
  }
  
  function loadFileAsText()
  {
  var fileToLoad = document.getElementById("fileToLoad").files[0];
  
  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent)
  {
  var textFromFileLoaded = fileLoadedEvent.target.result;
  document.getElementById("BoxText4Load").value = textFromFileLoaded;
  };
  fileReader.readAsText(fileToLoad, "UTF-8");
  }
  </code></pre>