2017-10-10 67 views
0

我已经编写了一些代码,可以为用户提供一条消息,让他们忽略该消息,或者如果他们闲置超过一分钟,则转到其他页面。一切正常,除非用户忽略消息。这里是我的代码:用户闲置后弹出

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后不重新填充。

+0

你只是问在用户点击那个元素时如何使用'clearInterval()'? – David

+0

工作小提琴/ plunkr会很好 – Pavan

+0

clearInterval(idleInterval);这将删除间隔,所以它不会再发生 – schylake

回答

0

您既可以将信息存储在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(); 
}); 
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/

似乎工作。让我知道这是否有帮助