Question

我已经在文档准备好的WordPress网站上在JQuery中实现了一个启动画面。

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

好的，Overlay在3秒后淡出。但是，如果我单击一个菜单按钮，整个页面将重新加载并且函数settimeout会重复，因为它已准备好文档。

如何在不使用复杂代码的情况下，每个域只设置一次？

Answer 1

您需要做的是实施cookie或类似的东西

我建议https://github.com/yanivkalfa/myCookie这是我自己的库，但还有其他类似的，所以你可以选择一个。

关键是要在Cookie或会话中设置一个标记或内容，表明您已经完成了所需的操作。

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

沿着这些方向，有其他解决方案......这看起来很简单。

Answer 2

另一个解决方案是使用我发现比cookie更好的document.referrer，因为如果我关闭页面并重新打开它，它就不会执行fadeOut代码。

因此，我从引荐来源中提取域名并与当前域名进行比较。

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

Answer 3

好的，我得到了解决方案:)会话cookie就是答案。

/* 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);
}

每个域只运行一次JS SetTimeout函数

3 个答案: