方法1：一次超时

Question

我有一个页面会在一小时后超时。我需要在45分钟时显示一个弹出警报，然后使用JavaScript或jQuery（我不知道jQuery，但它可用）在50-60之间每分钟显示一次。在60分钟标记处，我需要一条最终消息，通知用户页面将刷新。获得我的部分是，如果显示一个弹出窗口，除非最终弹出窗口被关闭，否则不应该有其他弹出窗口。即如果显示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();
        }
    }

Answer 1

方法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);
}

最后，您需要确保当用户关闭弹出窗口时，再次调用函数setNextTimeout()以关闭循环。如果您只是使用警报，它可能如下所示：

function showPopUp() {
    alert("Message!");
    //This will only run once the alert is closed.
    setNextTimeout();
}

方法2：所有超时

如果对弹出窗口使用警报，则无法使用的替代方法是立即设置所有超时。您需要使用具有绝对位置或类似技术的div，而不是警报。这看起来像这样：

//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.
    }
}

最后，您需要确保在弹出窗口关闭后，popup_open再次设置为false。

Answer 2

这是我最终为我的最终版本工作的工作原型（感谢安德斯）：

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

}

多个JavaScript超时弹出窗口仅在先前的弹出窗口关闭时显示

2 个答案:

方法1：一次超时

方法2：所有超时