title: Vanilla Javascript information ticker with setTimeout delay infinite loop
body: <p>I'm trying to display an information ticker using purely just vanilla JS (no jQuery etc).</p>
  <p>I have a div <code>&lt;div class=&quot;postcode-panel&quot;&gt;&lt;/div&gt;</code> with some text saying:</p>
  <p><em><strong>Latest information for XXX</strong></em> - This is to be displayed for 3 seconds</p>
  <p>This div then fades out of view and displays the next div <code>&lt;div class=&quot;rating-panel&quot;&gt;&lt;/div&gt;</code> with the text saying:</p>
  <p><em><strong>Rating 5.4</strong></em> - This is to be displayed for 15 seconds.</p>
  <p>Once the div <code>.rating-panel</code> has been viewed for 15 seconds then the first div <code>.postcode-panel</code> then loops back and displays for 3 seconds and this then just loops infinitely. I'm controlling the fade out animations with CSS, but I'm having difficulty getting all the different timeouts to work in the JS.</p>
  <hr />
  <p><strong>Update: I've managed to update my code to get the code to show and hide but I can't get it to it within the correct timings.</strong></p>
  <p>Here is a <a href="https://jsfiddle.net/p0f23nd6/1/" rel="nofollow noreferrer">JS Fiddle</a>.</p>
  <p>And below is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function postcode () {
          var postcodePanel = document.querySelector(".postcode-panel");
          var ratingPanel = document.querySelector(".rating-panel");
          var activeClass = 'active';
  
          function start() {
  
              setTimeout(function() {
                  
  
                  setTimeout(function(){
                      postcodePanel.classList.remove(activeClass);
                      ratingPanel.classList.add(activeClass);
                  }, 3000);
                  
                  setTimeout(function(){
                      start();
                  }, 15000);
                  postcodePanel.classList.add(activeClass);
                  ratingPanel.classList.remove(activeClass);
                  
              },100);
          }
  
          start();
      }
      window.addEventListener('load', postcode);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.info-panel {
      position:relative;
      background:blue;
      color:white;
      padding:20px;
      font-size:20px;
  }
  
  
  .postcode-panel {
      display:block;
      position:absolute;
      opacity: 0;
  }
  
  .postcode-panel.active {
      animation:ticker-pc 3s ;
  }
  
  .rating-panel {
      opacity: 0;
  }
  
  .rating-panel.active {
      animation:ticker-rr 12s ;
  }
  
  @keyframes ticker-pc {
      0% {
          opacity: 0;
          -webkit-transform:translateY(30px);
          transform:translateY(30px);
      }
  
      10% {
          opacity: 1;
          -webkit-transform:translateY(0);
          transform:translateY(0);
      }
      50% {
          opacity: 1;
          -webkit-transform:translateY(0);
          transform:translateY(0);
      }
  
      90% {
          opacity: 1;
          -webkit-transform:translateY(0);
          transform:translateY(0);
      }
  
      100% {
          opacity: 0;
          -webkit-transform:translateY(-30px);
          transform:translateY(-30px);
      }
  }
  
  @keyframes ticker-rr {
      0% {
          opacity: 0;
          -webkit-transform:translateY(30px);
          transform:translateY(30px);
      }
  
      2% {
          opacity: 1;
          -webkit-transform:translateY(0);
          transform:translateY(0);
      }
      50% {
          opacity: 1;
          -webkit-transform:translateY(0);
          transform:translateY(0);
      }
  
      97% {
          opacity: 1;
          -webkit-transform:translateY(0);
          transform:translateY(0);
      }
  
      100% {
          opacity: 0;
          -webkit-transform:translateY(-30px);
          transform:translateY(-30px);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="info-panel"&gt;
    &lt;div class="postcode-panel active"&gt;
      &lt;span class="latest-info"&gt;
        Latest information for
        &lt;span class="postcode-info"&gt;
          XXX
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="rating-panel"&gt;
      &lt;span class="rating"&gt;
        Rating &lt;span class="score"&gt;5.4&lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>