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

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);