title: Chaining promise with setTimeout
body: <p>I have a &quot;loading&quot; animation that I'm attempting to hide, then I need to fade in and out some other text and buttons. The below code is what I have so far, but the code within the <code>then</code> function is executing before <code>hideLogoAnimation</code> finishes, which causes the rest of my elements to show and hide themselves in the incorrect order.</p>
  <p>What am I doing wrong here?</p>
  <p>Here is a codepen showing the issue:
  <a href="https://codepen.io/TheNomadicAspie/pen/OJmzpXy" rel="nofollow noreferrer">https://codepen.io/TheNomadicAspie/pen/OJmzpXy</a></p>
  <pre><code>function handleWelcome(is_first_time = true) {
      console.log('handleWelcome')
      traceFunction()
      hideLogoAnimation().then(() =&gt; {
          hideInputText()
          console.log('handleWelcome is_first_time is ', is_first_time)
          hideButton(left_button)
          console.log('handleWelcome user_dict is ', user_dict)
          setTimeout(() =&gt; {
              if (is_first_time) {
                  showInfo(&quot;Some words&quot;)
                  showButton(right_button, 'Next', handleFirstTime1)
              } else {
                  showInfo(&quot;Welcome back&quot;)
                  showButton(right_button, 'Start', handleTestStart)
              }
          }, 250)
      })
  }
  
  function hideLogoAnimation() {
      console.log('hideLogoAnimation')
      return new Promise(() =&gt; {
          setTimeout(() =&gt; {
              logo_animation.classList.remove('fadein')
              logo_animation.classList.add('fadeout')
          }, 500)
          setTimeout(() =&gt; {
              logo_animation.classList.remove('show')
              speech_bubble_middle_bar.style.display = 'unset'
              speech_bubble_bottom_bar.style.display = 'grid'
              freeze_input = false
          }, 750)
      })
  }
  </code></pre>