title: Alternatives to callback functions in JavaScript
body: <p>I have 2 functions:</p>
  
  <pre><code>fadeOutBox();
  fadeInInfoBlock();
  </code></pre>
  
  <p>And I want to run the 2nd one (<code>fadeInInfoBlock</code>) ONLY once the 1st one (<code>fadeOutBox</code>) finishes. </p>
  
  <p>Is a callback function the only/best way to do this? </p>
  
  <p>Is there any other way to run a function after another function has completed?</p>
  
  <p>EDIT: other code added here:</p>
  
  <p>Here is what I have going on - working on consolidating multiple redundant functions into one function, but currently I have functions for each of 12 boxes (divs) to add listeners for mouseenter/leave and then I have setInterval loops to increment/decrement the opacity to fade boxes on and off.</p>
  
  <p>Add the listeners:</p>
  
  <pre><code>var box01 = document.getElementById("grid01");
  box01.addEventListener("mouseenter", fadeOutBoxesFadeInInfoBlock01);
  box01.addEventListener("mouseleave", fadeInBoxesFadeOutInfoBlock01);
  infoBlock01.style.zIndex = -1; // THIS PUTS DIV AT THE BACK OF THE STACK, SO THE MOUSEENTER CAN TOUCH THE GRIDBOX
  infoBlock01.style.opacity = 0;
  </code></pre>
  
  <p>Next functions run other functions that do the opacity fade loops:</p>
  
  <pre><code>function fadeOutBoxesFadeInInfoBlock01() {
  setTimeout(function() { fadeOut01(); }, 200);
  setTimeout(function() { fadeInInfoBlock01(); }, 200);
  </code></pre>
  
  <p>}</p>
  
  <pre><code>function fadeInBoxesFadeOutInfoBlock01() {
  setTimeout(function() { fadeIn01(); }, 200);
  setTimeout(function() { fadeOutInfoBlock01(); }, 100);
  </code></pre>
  
  <p>}</p>
  
  <p>I added the setTimeouts to try to handle mouse movements that are too fast. The code works well if user moves mouse slowly. This is the main issue I'm having - I think I need to completely finish the fadeouts/fadeins before I add the event listeners back to the boxes. Thinking this will better handle the mouse moving too fast over the boxes.</p>
  
  <p>Here is the fadeOut loop for box 1 (again, I have 11 more of these for each other box-haven't figured out how to consolidate into one function yet:</p>
  
  <pre><code>function fadeOut01() {
  
  removeListeners();
  var op = 1;  // initial opacity
  var timer = setInterval(function () {
      if (op &lt;= 0.1){
          clearInterval(timer);
  
      }
      box02.style.opacity = op;
      box03.style.opacity = op;
      box04.style.opacity = op;
      box05.style.opacity = op;
      box06.style.opacity = op;
      box07.style.opacity = op;
      box08.style.opacity = op;
      box09.style.opacity = op;
      box10.style.opacity = op;
      box11.style.opacity = op;
      box12.style.opacity = op;
  
      op -= op * 0.1;
  }, 20);
  
  setTimeout(function() {addListeners(); }, 1000);
  </code></pre>
  
  <p>}</p>
  
  <p>And to fade in the infoBlocks:</p>
  
  <pre><code>function fadeInInfoBlock01() {
  
      infoBlock01.style.zIndex = 0; // THIS PUTS DIV AT TOP OF THE STACK, SO THE MOUSEENTER CAN TOUCH THE GRIDBOX
  
      var infoBlockOpacity = 0.1;  // initial opacity
      var timer = setInterval(function () {
      if (infoBlockOpacity &gt;= 1){
          clearInterval(timer);
      }
      infoBlock01.style.opacity = infoBlockOpacity;
      infoBlockOpacity += 0.1;
      }, 30);
  </code></pre>
  
  <p>}</p>