Question

我正在创建一个在用户滚动时显示的弹出窗口。但是，当用户单击关闭按钮并刷新页面并滚动时，我需要在10分钟后弹出一个弹出窗口。

var popUp= document.getElementById("popup");
var closePopUp= document.getElementsByClassName('popup-close');
var halfScreen= document.body.offsetHeight/2;
var showOnce = true;

//show when scroll
window.onscroll = function(ev) {
    if ((window.innerHeight+window.scrollY) >= halfScreen && showOnce) {
        if(popUp.className === "hide"){
            popUp.className = "";
        }
        showOnce = false;
    }
};

//close button
for(var i = 0; i<closePopUp.length; i++){
    closePopUp[i].addEventListener('click', function(event) {
        if(popUp.className === ""){
            popUp.className = "hide";
        }
    });
}

Answer 1

您应该使用cookie并将Cookie过期时间设置为10分钟，看看这个cookie plugin希望它有所帮助

设置Cookie

$.cookie("example", "foo"); // Sample 1
$.cookie("example", "foo", { expires: 7 }); // Sample 2

获取Cookie

alert( $.cookie("example") );

删除cookie

$.removeCookie("example");

或在this回答中给出了一个示例，请看一下

Answer 2

首先，您应检测用户是否刷新了页面。您可以使用navigator object来实现此目的。请执行this question以实现。

其次，一旦用户刷新页面，所有变量都会被销毁并再次初始化。因此，你必须使用cookie或服务器端会话来存储用户是否已经关闭它。但我总是建议你设置会话，因为cookie可以被用户禁用。

总结一下，一旦用户刷新页面就设置一个ajax请求，如果已经关闭了弹出窗口，则启动超时10分钟。为此添加样本原型：

var refreshed = false;
if (performance.navigation.type == 1) {
  console.info( "This page is reloaded" );
  refreshed = true;
} else {
  console.info( "This page is not reloaded");
  refreshed = false;
}
if(refreshed) {
    //implement this ajax function yourself.
    ajax('path/to/yourserver','method','data',function(response) {
        if(response == "showed") {
            var time = 10 * 60 * 1000;//10 minutes.
            setTimeout(function() {
                //show your popup.
            },time);
        }else {
            //immediately show once scrolled.
        }
    });
}

刷新页面后阻止弹出窗口

2 个答案: