Run JS SetTimeout function only once per domain

Question

I've implemented a Splash Screen in JQuery on my WordPress Site on Document ready.

setTimeout(function() {
  $("#site-overlay").fadeOut();
}, 3000);

Ok, the Overlay fades out after 3 seconds. But if I click on a menu button, the whole page reloads and the function settimeout repeats because its on the document ready.

How can I set this only for one time per Domain without using complicated code?

if the page reload you cant do it without a complicated solution ( well not complicate but ...) — Neta Meta, May 14 '16 at 16:53
Possible duplicate of [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/) — guest271314, May 14 '16 at 17:00

score 1 · Answer 1 · answered May 14 '16 at 16:57

1

What you will have to do is implement cookies or something alike

I would suggest https://github.com/yanivkalfa/myCookie which is my own library but there are other like its so you can pick one.

The point is to set a flag or something in a cookie or session that says that you already done the action you want.

e.g:

  // <script .... https://github.com/yanivkalfa/myCookie .. inclode my cookies library

  setTimeout(function() {
    var overlayFlag = $.fn.myCookie({cName: "overlayFlag"});
    if (!overlayFlag) {
      $.fn.myCookie( {cName : "overlayFlag", cVal : true} );
      $("#site-overlay").fadeOut();
    }
  }, 3000);

Something along these lines, there are other solutions .. this seemed a simple.

answered May 14 '16 at 16:57

Neta Meta

4,001
9
42
67

Hello, thx, i will check this now sounds good. Im new to js, so i thought something like a file to check :D – satinez May 14 '16 at 17:06
Ok there is an Error in this script, but the console shows nothing. The cookie is created, the overlay is still displayed and and the settimout function will not run ;( http://u52.mylanneqx.com/ – satinez May 14 '16 at 17:26
did you include my library or just copy pasted my code ? also if you included the library did you make sure to include it after jquery ? – Neta Meta May 14 '16 at 17:33
ok so what is the problem ? i refreshed the page and i see a true alert happening. – Neta Meta May 14 '16 at 17:36
Yes hmmm, maybe i have to check at the beginning. – satinez May 14 '16 at 17:39
Ok the problem is, the setToimeout is not working, not disappearing the Overlay. – satinez May 14 '16 at 17:53
ok then you have explained your self wrong, because that what i though you wanted. Right now when you visit the page first time setTimeout function will happened only 1 time, every time you visit the page after it, setTimoutout will not run – Neta Meta May 14 '16 at 17:57
Ok i fixed it. In your Lib can u also delete cookie after browser close? – satinez May 14 '16 at 18:10
I am not really sure i wrote it like 2 years ago more or less should be something like `$.fn.myCookie({cName: "newCookie", del:true});` check https://github.com/yanivkalfa/myCookie – Neta Meta May 14 '16 at 18:14

score 0 · Answer 2 · answered May 14 '16 at 17:06

0

Another solution would be to use the document.referrer which I find better than the cookie, because if I close the page and reopening it, it would not do the fadeOut code.

So, I extract the domain from the referrer and compare with current one.

setTimeout(function() {
    var referrerDomain = document.referrer;
    if (referrerDomain != "") {
        referrerDomain = referrerDomain.substring(document.referrer.indexOf('//') + 2);
        referrerDomain = referrerDomain.substring(0, referrerDomain.indexOf('/'));
    }
    if (referrerDomain != window.location.host) {
      $("#site-overlay").fadeOut();
    }
}, 3000);

answered May 14 '16 at 17:06

Master DJon

1,899
2
19
30

@Master Djon you realize that if he go for 2 different location your idea will not work ? also cookies gonna work even if you close the browser just set an expiration date .. – Neta Meta May 14 '16 at 17:15
@NetaMeta Well, in the question the OP asked "per domain" and concerning retaining it, well then it depends on his/her needs. – Master DJon May 14 '16 at 21:58

score 0 · Accepted Answer · answered May 15 '16 at 13:16

Ok, i got the solution for me :) session cookie was the answer.

/* check if session cookie is set, if not so set the cookie and animate the Overlay
 * The session cookie will destroy if the BROWSER is closed (not TAB)
 */
if( document.cookie.indexOf("overlayed=") < 0) 
{
  document.cookie = "overlayed=true; path=/";
  $("#site-overlay").show();
  $("#site-overlay-content").show().center();

  setTimeout(function() 
  {
    $("#site-overlay").fadeOut(750);
  }, 3000);
}

Run JS SetTimeout function only once per domain

3 Answers3