title: How to delay JS function from running until 5 seconds after page loads
body: <p>I want this to run but so that it doesn't for 5 seconds after the page fully loads. How would I go about achieving this, I believe its a <code>,500</code> somewhere but I am not sure where this would go.</p>
  <p>If you have any questions please ask!</p>
  <p>Thank you in advance for you help on this matter,  its very much appreciated!</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>    $(".demoBookedContentClose").click(function(){
    $("body").addClass("demoBookedHidden");
  });
  
  
      function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;
  
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
  
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
  
      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
  
    return array;
  }
  
  var queue = [];
  
          
          
  function setUp() {
    var elems = $(".demoBooked").get();
    queue = shuffle(elems);
    showNext();
  }
  
  function showNext() {
    var elem = queue.pop();
    if (elem) {
      $(elem)
        .fadeIn(2000)
        .delay(5000)
        .fadeOut(1000, function(){ setTimeout(showNext,25000); });
    } else {
      setUp();
    }
  }
  
  setUp();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .demoBooked {
      background: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.08);
      border: 1px solid #dddddd;
      padding: 20px;
      border-radius: 8px;
      display: none;
      }
      .demo-booked-section {
      position: fixed;
      bottom: 10px;
      left: 10px;
      z-index: 2;
      }
      .demoBooked h3 {
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 4px;
      }
      .demoBooked img {
      max-width: 50px;
      margin-top: -55px;
      border-radius: 100%;
      display: inline-block;
      }
      .demoBookedContent {
      display: inline-block;
      padding-left: 20px;
      }
      .demoBooked p {
      font-size: 18px;
      line-height: 20px;
      }
      .demoBookedTime {
      color: #e12826;
      }
      .demoBookedContentClose {
      position: absolute;
      right: 15px;
      top: 10px;
      font-size: 10px;
      cursor: pointer;
      }
      .demoBookedHidden .demo-booked-section {
      display: none!important;
      }
      .demoBookedTime {
          font-size: 15px;
      }
      @media only screen and (max-width: 768px) {
          .demo-booked-section {
              display: none!important;
          }   
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="demo-booked-section"&gt;
      &lt;div class="demoBooked"&gt;
          &lt;img src="/wp-content/uploads/2021/01/william-diaz.jpg"&gt;
          &lt;div class="demoBookedContent"&gt;
              &lt;span class="demoBookedContentClose"&gt;X&lt;/span&gt;
              &lt;h3&gt;William Diaz&lt;/h3&gt;
              &lt;p class="demoBookedText"&gt;Just started a FREE trial&lt;/p&gt;
              &lt;p class="demoBookedTime"&gt;1hrs ago&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="demoBooked"&gt;
          &lt;img src="/wp-content/uploads/2021/01/freya-smith.jpg"&gt;
          &lt;div class="demoBookedContent"&gt;
              &lt;span class="demoBookedContentClose"&gt;X&lt;/span&gt;
              &lt;h3&gt;Freya Smith&lt;/h3&gt;
              &lt;p class="demoBookedText"&gt;Just started a FREE trial&lt;/p&gt;
              &lt;p class="demoBookedTime"&gt;3hrs ago&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>