How to set function to random delay time on first page load?

JavaScript
1

Hi, I’ve been working on this little script and it almost works except on the page loads it shows immediately and I would like to get to start on page load between something like 5-30 seconds.

How can I do this as I’ve tried about everything I can find on Google?

Here’s my code so far:

function refreshData(){
  var min = 2,
  max = 40;
  var rand = Math.floor(Math.random() * (max - min + 1) + min);
  var audio = new Audio('bobble-pop.mp3');
  var myArray = ['Trees','Dogs','Cats'];  	
  setTimeout(refreshData, rand * 1000); 
 
$(document).ready(function() {
         var randomTitle = myArray[Math.floor(Math.random() * myArray.length)];	
        $.meow({
          message: $('#onready'),
          icon: 'cat.gif',
		  title: randomTitle,
         });
		audio.play();  
      });
}
refreshData();

Thank you

2

Currently the past line of code starts the refreshData() function immediately. You can replace that with a setTimeout to delay things.

// refreshData();
setTimeout(refreshData, 5000);

That commented out line isn’t needed now, and can be removed.

If you want it to happen five seconds after page load, then you will want to assign it to the load event.

function refreshDataWithRandomDelay() {
    setTimeout(refreshData, 5000);
}
document.addEventListener("load", refreshDataWithRandomDelay, false);

We can extend the amount of time that it waits, by adding on a random value from 0-25, to give us the desired 5-30 delay.

function refreshDataWithRandomDelay() {
    setTimeout(refreshData, 5000 + Math.random() * (30 - 5) * 1000);
}
document.addEventListener("load", refreshDataWithRandomDelay, false);

Let’s put those numbers in to variables to make the code easier to understand.

function refreshDataWithRandomDelay() {
    var minSeconds = 5;
    var maxSeconds = 30;
    var minMilliseconds = minSeconds * 1000;
    var extraMilliseconds = (maxSeconds - minSeconds) * 1000;
    setTimeout(refreshData, minMilliseconds + Math.random() * (extraMilliseconds));
}
document.addEventListener("load", refreshDataWithRandomDelay, false);
3

That works. Thanks

I had to change:

document.addEventListener("load", refreshDataWithRandomDelay, false);

with:

window.addEventListener("load", refreshDataWithRandomDelay, false);

One more thing. How can I add styles to “some stuff here” below:

title: randomTitle + "some stuff here"

Like this for example:

title: randomTitle + "<span style="color:red">some stuff her</span><br />"

4

You could retrieve the text using innerHTML, break it apart within JavaScript using split or substring, and then replace the existing text with a span and class.

Can we get some details on how that title is affected by scripting, and how it makes it to the page?

5

Here’s where I found the script:

6

Can I get some details from you on how the title gets to the page?

7

Not exactly sure. But right here is probably how:

      // Add title if it's defined
      if (typeof this.title === 'string') {
        this.manifest.find('.inner').prepend(
          $(window.document.createElement('h1')).text(this.title)
        );
      }

Then on the page it has this:

<div id="onready">I'll meow upon ready</div>

8

How does the onready part relate to the .inner part in the code? And how does that title part with the random title and some stuff here, relate to what you’ve given here?

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.