僅在上一個彈出窗口關閉時纔會顯示多個JavaScript超時彈出窗口

Question

我有一個小時後超時會話的頁面。我需要在45分鐘後顯示彈出警報，然後在50-60分鐘內使用JavaScript或jQuery（我不知道jQuery，但它是可用的）每分鐘顯示一次。在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

下面是我結束了工作過的我的最終版本（感謝安德斯）的工作原型：

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

} 

Answer 2

方法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一次。