How to call a javascript function after a fixed time delay from a fixed time considering page refresh

Question

I have a use case in which a function needs to be called after 30 minutes from a fixed time. Say the fixed time is 16:30:48 and the function needs to be called after 30 minutes from 16:30:48. User might refresh the page but this should not affect the timing of calling the javascript function. The function should be called at 17:00:48 no matter how many page refreshes the user makes.

Is there a method in javascript that takes the time or Date in a function and execute the function at that time.

Is there a way in javascript to achieve that?

Thanks.

see http://stackoverflow.com/questions/4455282/call-a-javascript-function-at-a-specific-time-of-day — Marcelo Diniz, Jan 24 '12 at 08:58

T.J. Crowder · Accepted Answer · 2012-01-24T09:06:29.580

Some notes:

Because of the page refresh, the only real way to do this is to store the first page load time in a cookie or local storage if your target browsers support it.
You'll need to not replace that cookie or local storage item if you see it's already there.
If using a cookie, you'll need to store the date as a string, so probably best to get the "milliseconds since The Epoch" value (yourDate.getTime()) and then store the string version of that.
Compare the resulting epoch-ms value to the current date's epoch-ms value and, if it's been 30 minutes, issue your alert or what-have-you. If it hasn't (yet) been, set up a timer on the current page to fire when it has been.

So in pseudo-code:

var existingValue, remaining, THIRTY_MINUTES;
THIRTY_MINUTES = 30 * 60 * 1000;
existingValue = getExistingValueFromCookieOrLocalStorage("myvalue");
if (!existingValue || existingValue > SOME_STALE_AMOUNT) {
    // First page load / existing value is stale, start again
    putValueInStorage("myvalue", String(new Date().getTime()));
}
else {
    // We have the value, how long left?
    remaining = THIRTY_MINUTES - (new Date().getTime() - Number(existingValue));
    if (remaining <= 0) {
        // It's time!
        trigger();
    }
    else {
        // Not yet, schedule the timer -- this will get wiped out by
        // a page reload
        setTimeout(trigger, remaining);
    }
}
function trigger() {
    showTheAlert();
    removeValueFromStorage("myvalue");
}

@T.J.Crowder: Many thanks for the answer. That solves half of the problem I guess. Could you suggest me a simple javascript(jQuery) guide which I could refer and get done with this functionality. I am barely a javascript script guy, no idea about how to handle cookies in javascript. Again thanks for the answer :) — skip, Jan 24 '12 at 09:01
@skip: I think it solves all of the problem, barring actually writing the code for you (and the pseudo-code is close). :-) If you want to use cookies, look for a cookie library to use. There are thousands of them. I think you said you're using jQuery; there's the [jCookie](http://jcookie.sourceforge.net/) plug-in. As for JavaScript resources, check out the [JavaScript info page](http://stackoverflow.com/tags/javascript/info) here on SO for references. — T.J. Crowder, Jan 24 '12 at 09:08
@T.JCrowder: Yep, I think you saved me a day or two :). Thanks again. — skip, Jan 24 '12 at 09:24

score 0 · Answer 2 · answered Jan 24 '12 at 08:57

0

You could save a cookie with the time to execute the function and examine the cookie when the page is loaded. Otherwise for in-page timing, a setTimeout() should suffice.

answered Jan 24 '12 at 08:57

andyb

43,435
12
121
150

Yep. `setTimeOut()` will need to be used. – skip Jan 24 '12 at 09:25

score 0 · Answer 3 · answered Jan 24 '12 at 08:57

0

Assuming cookies are enabled, you could set a cookie when the user first enters the site (checking one isn't already in existence) with the time +30 mins. Then do a window.setTimeOut () calling your function. This way, is the user refreshes the window you can pull back the cookie fetching your target time, then recalculate how long until your function should be called, then setup a new window.setTimeOut()

answered Jan 24 '12 at 08:57

Shawson

1,858
2
24
38

This page basically is a page where user is supposed to do something within 30 min. If the user doesn't submit after doing the thing the page should auto-submit. So the user might actually be around logged in for quite sometime but I need to start timing him ever since he first got into this particular page that I need to time 30 minutes for. – skip Jan 24 '12 at 09:29

How to call a javascript function after a fixed time delay from a fixed time considering page refresh

3 Answers3