How to delay JS function from running until 5 seconds after page loads

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 ,500 somewhere but I am not sure where this would go.

If you have any questions please ask!

Thank you in advance for you help on this matter, its very much appreciated!

    $(".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();

    .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;
        }   
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="demo-booked-section">
    <div class="demoBooked">
        <img src="/wp-content/uploads/2021/01/william-diaz.jpg">
        <div class="demoBookedContent">
            <span class="demoBookedContentClose">X</span>
            <h3>William Diaz</h3>
            <p class="demoBookedText">Just started a FREE trial</p>
            <p class="demoBookedTime">1hrs ago</p>
        </div>
    </div>
    <div class="demoBooked">
        <img src="/wp-content/uploads/2021/01/freya-smith.jpg">
        <div class="demoBookedContent">
            <span class="demoBookedContentClose">X</span>
            <h3>Freya Smith</h3>
            <p class="demoBookedText">Just started a FREE trial</p>
            <p class="demoBookedTime">3hrs ago</p>
        </div>
    </div>
  </div>

Answer

Since you want the function to be fired up 5 seconds after the page is fully loaded you will be using a combination of two functions.

I see you are using jQuery in your website The below code waits until the page is fully loaded then fires up the code inside the brackets.

$( document ).ready(function() {
     // code here
});

So inside the above code you will add your 5 seconds waiting function

setTimeout(function(){
    // Magic happens here
},5000);

The final code is

$( document ).ready(function() {
    setTimeout(function(){
        // Magic happens here
    },5000); 
});

Advertisement

Answer