title: Wait for an async callback to finish before completing separate function in Javascript
body: <p>Apologies if this is a repeat, but all I can find is help to let the function finish or unrelated languages, not what to do after.  Anyway...</p>
  
  <p>So, I have two other-wise unrelated functions.  One calls the Namey API, which returns a random name in a callback, and I use that to update an element.  This is my randomizePANameListeners function.</p>
  
  <p>My second function takes the first name and last name from those two elements and uses them to create a random username.  This is my randomizeAppNameListeners.</p>
  
  <pre><code>randomizePANameButton.addEventListener("click", function(e) {
  
                //  Check the gender of the PA
              var isChecked = document.getElementById("gender56").checked;
  
                //  Use a self-invoking function to make sure the names are
                //  updated correctly
              (function() {
                if (isChecked === true) {
                  namey.get({ type: 'male', with_surname: 'false', frequency: 'all', callback: function(n) { document.getElementById("fName").value = n }});
                } else {
                  namey.get({ type: 'female', with_surname: 'false', frequency: 'all', callback: function(n) { document.getElementById("fName").value = n }});
                }
  
                  //  Set the surname as well
                namey.get({ type: 'surname', with_surname: 'false', frequency: 'all', callback: function(n) { document.getElementById("lName").value = n }});
              })()
  </code></pre>
  
  <p>And, attached to a second button's event listener:</p>
  
  <pre><code>    var fName = document.getElementById("fName").value.substring(0, 3);
      var lName = document.getElementById("lName").value;
      var randomDigits = (Math.random() * (100 - 10) + 10).toFixed(0);
  
      return fName + lName + ".UAT" + randomDigits;
  </code></pre>
  
  <p>Now, I have one button to make everything easier by tying all of these event listeners together.  My easy button does everything for me, but when it calls these two it takes the current values in the elements to make the random name and then creates a new application name, it doesn't take the new PA name.</p>
  
  <p>So, using vanilla JavaScript, how do I wait for the first function to complete before finishing the second?  I would prefer not to create an unneeded global variable.</p>