多个JavaScript超时弹出窗口,仅在上一个弹出窗口关闭时显示
我有一个页面,在一小时后超时一个会话。我需要使用JavaScript或jQuery(我不知道jQuery,但它是可用的)在45分钟时显示一个弹出警报,然后在50-60分钟之间每隔一分钟显示一次。60分钟后,我需要最后一条消息,通知用户页面将刷新。得到我的部分是,如果显示一个弹出窗口,那么在关闭之前,不应该显示其他弹出窗口,除了最后一个。i、 e.如果10分钟弹出窗口显示但2分钟内未关闭,则9分钟和8分钟弹出窗口不应显示,但7分钟弹出窗口应显示 到目前为止,我已经提出了一个在页面加载时调用的函数,但它既难看又不起作用:多个JavaScript超时弹出窗口,仅在上一个弹出窗口关闭时显示,javascript,jquery,html,popup,settimeout,Javascript,Jquery,Html,Popup,Settimeout,我有一个页面,在一小时后超时一个会话。我需要使用JavaScript或jQuery(我不知道jQuery,但它是可用的)在45分钟时显示一个弹出警报,然后在50-60分钟之间每隔一分钟显示一次。60分钟后,我需要最后一条消息,通知用户页面将刷新。得到我的部分是,如果显示一个弹出窗口,那么在关闭之前,不应该显示其他弹出窗口,除了最后一个。i、 e.如果10分钟弹出窗口显示但2分钟内未关闭,则9分钟和8分钟弹出窗口不应显示,但7分钟弹出窗口应显示 到目前为止,我已经提出了一个在页面加载时调用的函数,
// Alerts starting at 45 minutes into session, then from 10 - 1, and a final alert
var timerMultiplier = 10000; //used so I can change times in testing
var timeoutAlertAcknowledged = true; //a flag I've tried using to know when a box has been closed
function setTimeoutAlerts(){
if(document.getElementById("$!arsTO.getConstantValue('FIELD_NAME_ROW_COUNT')").value > 0){
var sessionWarningTime15=setInterval(function () {myTimer('warning',15, sessionWarningTime15)}, 270*timerMultiplier);
var sessionWarningTime10=setInterval(function () {myTimer('warning',10, sessionWarningTime10)}, 300*timerMultiplier);
var sessionWarningTime9=setInterval(function () {myTimer('warning',9, sessionWarningTime9)}, 306*timerMultiplier);
var sessionWarningTime8=setInterval(function () {myTimer('warning',8, sessionWarningTime8)}, 312*timerMultiplier);
var sessionWarningTime7=setInterval(function () {myTimer('warning',7, sessionWarningTime7)}, 318*timerMultiplier);
var sessionWarningTime6=setInterval(function () {myTimer('warning',6, sessionWarningTime6)}, 324*timerMultiplier);
var sessionWarningTime5=setInterval(function () {myTimer('warning',5, sessionWarningTime5)}, 330*timerMultiplier);
var sessionWarningTime4=setInterval(function () {myTimer('warning',4, sessionWarningTime4)}, 336*timerMultiplier);
var sessionWarningTime3=setInterval(function () {myTimer('warning',3, sessionWarningTime3)}, 342*timerMultiplier);
var sessionWarningTime2=setInterval(function () {myTimer('warning',2, sessionWarningTime2)}, 348*timerMultiplier);
var sessionWarningTime1=setInterval(function () {myTimer('warning',1, sessionWarningTime1)}, 354*timerMultiplier);
var sessionEndTime=setInterval(function () {myTimer('timesUp',0, sessionEndTime)}, 360*timerMultiplier);
}
}
//Create popup alerts
function myTimer(type, time, timerVariable) {
clearInterval(timerVariable); //clear current timer variable so it only occurs once
if(type == 'warning' && timeoutAlertAcknowledged == true){
timeoutAlertAcknowledged = false;
alert("WARNING: Your session will expire in "+ time +" minutes.");
}
else if(type == 'timesUp'){
alert("The session has expired. The page will now be refreshed.");
pageRefreshMethod();
}
}
方法1:一次超时一次
一种方法是一次只设置一个超时。其思想是每次用户关闭弹出窗口时调用函数(setNextTimeout
)。然后检查时间,并从预定义的时间数组中查找下一个弹出窗口应显示的时间。两者之间的区别是您希望在下次弹出窗口之前的延迟
请注意,我还没有测试这段代码,您可能需要修复一些错误,并使其适应您的具体情况。所以它不是复制粘贴就绪
//Define when we want the pop up to appear.
var popup_times = [45, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60]
//Save the start time for future reference.
var start_time = new Date();
//Start the whole thing off.
setNextTimeout();
function setNextTimeout() {
//Calculate the number of minutes that has passed.
var current_time = new Date();
var elapsed_time = (current_time - start_time) / (60 * 1000);
//Find the index i of the next popup_times.
var i;
for(i=0; i<popup_times.length; i++)
if(popup_times[i] >= elapsed_time) break;
//Calculate the delay until the next popup in milliseconds.
//If we are past the last popup time, we should do something immediately.
//Hence the i < popup_times.length ? ... : 0 part.
var delay = i < popup_times.length ? (popup_times[i] - elapsed_time) * 60 * 1000 : 0;
//Set the timeout.
//Replace showPopUp with whatever function you use to handle the pop up.
//Might want to pass some parameters as well, for instance to specify for what time the popup is.
setTimeout(showPopUp, delay);
}
方法2:一次完成所有超时
另一种方法是,如果对弹出窗口使用alert,则无法同时设置所有超时。您需要使用具有绝对位置的div或类似技术,而不是警报。可能是这样的:
function showPopUp() {
alert("Message!");
//This will only run once the alert is closed.
setNextTimeout();
}
//Define when we want the pop up to appear.
var popup_times = [45, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60]
//Keep a flag to track if the popup is open.
var popup_open = false;
//Set all the timeouts.
for(var i=0; i<popup_times.length; i++) {
setTimeout(showPopUp, popup_times[i] * 60 * 1000);
}
//A function to show the popup.
function showPopUp() {
//Only show the popup if one isn't already open.
if(!popup_open) {
//Now one is open.
popup_open = true;
//Put code to open the popup here.
//Since it is a separate problem I will not cover it here.
//Just google for how to do a JavaScript popup.
}
}
//定义希望弹出窗口出现的时间。
var popup_times=[45,50,51,52,53,54,55,56,57,58,59,60]
//保留一个标记以跟踪弹出窗口是否打开。
var\u open=false;
//设置所有的超时。
对于(var i=0;i这是我最终为最终版本开发的工作原型(感谢anders):
var-alertTimes=[10,15,20,21,22,23,24,25];
var startTime=新日期();
函数setNextTimeout(){
var currentTime=新日期();
var elapsedTime=(currentTime-startTime)/1000;
时间变量;
//查找下一次警报的索引i。
var i;
对于(i=0;i=elapsedTime)中断;
}
var延迟=0;
如果(i=alertTimes.length){
setTimeout(函数(){showPopUp(“FINAL”);},延迟);
}
}
功能显示弹出窗口(时间){
警报(“已经”+时间+“秒”);
如果(时间!=“最终”){
setNextTimeout();
}
}
1)使用设置超时2。在您调用的函数中设置下一个超时3)不要使用警报,而是显示和隐藏绝对定位或位置:固定div,甚至可以移动或取消的对话框
var alertTimes = [10, 15, 20, 21, 22, 23, 24, 25];
var startTime = new Date();
function setNextTimeout() {
var currentTime = new Date();
var elapsedTime = (currentTime - startTime)/1000;
var tempTime;
// Find the index i of the next alertTimes.
var i;
for(i=0; i<alertTimes.length; i++){
tempTime = alertTimes[i];
if(tempTime >= elapsedTime) break;
}
var delay = 0;
if(i < alertTimes.length){
delay= (alertTimes[i] - elapsedTime)*1000;
}
if(delay != 0){
setTimeout(function(){showPopUp(alertTimes[i]);}, delay);
}
else if(i >= alertTimes.length){
setTimeout(function(){showPopUp("FINAL");}, delay);
}
}
function showPopUp(time) {
alert("It has been "+time+" sedconds.");
if(time != "FINAL"){
setNextTimeout();
}
}