Question

我编写了一些代码，为用户显示一条消息，要么忽略该消息，要么在闲置超过一分钟后转到另一个页面。除非用户忽略该消息，否则一切正常。这是我的代码：

if ( valid ) {
    var idleTime = 0;
    jQuery(document).ready(function () {
    var idleInterval = setInterval(timerIncrement, 60000);
});

function resetTimer() {
    idleTime = 0;
}

jQuery(document)
.on('mousemove', resetTimer)
.on('keydown', resetTimer)
.on('scroll', resetTimer);

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime >= 1) {
        jQuery('#popup').show();
    }
    jQuery(window).unbind();
}

jQuery('#popupClose').click(function() {
    jQuery('#popup').hide();
});
}

我希望弹出窗口在单击#popupClose后不再重新填充。

Answer 1

我这样做。只需在初始化脚本时定义开始时间即可。让间隔运行检查已经过了多少时间。如果它超过您希望的时间显示对话框。如果不隐藏它。同时重置事件的计时器。您的javascript将如下所示

$('#btclose').on('click', function(){
    clearInterval(interv);
  $('#popup').hide();
});
var start = new Date();

var interv = setInterval(function(){
    var now = new Date();
  console.log()
  if(now-start > 5*1000){
    $('#popup').show();
  }

},10);


$('body').on('mousedown click mousemove', function(){
    start = new Date();
});

这是我的小提琴

https://jsfiddle.net/c2L7wpn3/8/

似乎工作。如果有帮助，请告诉我

Answer 2

您可以将信息存储在cookie中，也可以使用标记存储（取决于您是希望每次浏览时是弹出窗口还是只需要一次，时间段）。

然后，在显示弹出窗口之前检查标志/ cookie。例如：

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime >= 1) {
        if (jQuery('#popup').data('closed') == 1){
            jQuery('#popup').show();
        } 
    }
    jQuery(window).unbind();
}

jQuery('#popupClose').click(function() {
    jQuery('#popup').data('closed', 1);
    jQuery('#popup').hide();
});

用户空闲后弹出

2 个答案: