如何使用ajax請求更改setTimeout（）計數器？

Question

我寫了一個小的jQuery代碼，如果頁面未刷新1800秒，將顯示一個對話框。會話自動結束前，對話框會倒計時。如果用戶點擊「是，繼續工作」，則計數器重置，對話框消失。否則，用戶將被轉移到註銷頁面。

我在這裏遇到的問題是用戶打開新瀏覽器的選項卡並繼續在新選項卡上工作。然後，舊標籤將在「1800秒後無刷新」時變爲空閒狀態，因此它們將所有會話都鬆開並註銷。

我已經創建了一個PHP頁面，它將通過使用$_SESSION信息檢查數據庫中的時間來返回剩餘的秒數。但我不確定如何重置對話框打開時的計數器。

我不確定如何修改我的代碼以檢查顯示對話框之前剩餘的實際秒數。

這裏是我的代碼

<!-- This script will alert a user before forcing to logout --> 
<script type="text/javascript"> 
    var timer; 
    var closeDialogAfter = 180; //The default counter value 
    var idleTimeOutLimit = 1800 - closeDialogAfter; //Display the dialog after @idleTimeOutLimit seconds of idle time 
    var signOutScript = '/index.php?action=logout'; //logout url 
    var keepAliveScript = '/ajax/handler-keep-me-alive.php'; //php page to handle ajax request to keep the session alive 
    var dialogCountdown = '#dialog-countdown'; // the lable that is used to display the counter 
    var idleTimeout= '#idleTimeout'; //the div that is used for the dialog 

    $(function(){ 

     //start the idle time out counter 
     startTimeoutCounter(); 

     $(idleTimeout).dialog({ 
      resizable: false, 
      autoOpen: false, 
      width: 400, 
      open: function(){ 
       updateTimeoutCounter(); 
      }, 
      buttons: { 
       "Yes, Keep working": function(e) { 
        $.ajax({  
         url: keepAliveScript,  
         success: function(data) { 
          startTimeoutCounter(); 
          $(idleTimeout).dialog("close"); 
         } 
        }); 
       }, 
       "No, End Session": function(e){ 
        forceLogOut(); 
        $(this).dialog('close');     
       } 
      } 
     }); 
    }); 


    function startTimeoutCounter(){ 
     timer = closeDialogAfter; 
     $(dialogCountdown).text(timer); 

     setTimeout(function(){ 
      $(idleTimeout).dialog("open"); 
     }, idleTimeOutLimit * 1000); 
    } 

    function updateTimeoutCounter(){ 

     if( $(idleTimeout).dialog("isOpen")){ 

      setTimeout(function(){ 
       timer = timer -1; 
       $(dialogCountdown).text(timer); 
       (timer < 2) ? forceLogOut() : updateTimeoutCounter(); 
      }, 1000); 
     } else 
      $(dialogCountdown).text(closeDialogAfter) 
    } 

    function forceLogOut(){ 
     window.location = signOutScript; 
    } 

</script> 

Answer 1

在烏拉圭回合腳本PHP

u需要只剩secondes人數
你的JavaScript需要開始使用Ajax請求的PHP頁面返回。

<script type="text/javascript"> 
    $.get("timeleft.php",function(data){ 
     var timer; 
     var closeDialogAfter = parseInt(data); //<-- what i changed 
     var idleTimeOutLimit = 1800 - closeDialogAfter; //Display the dialog after @idleTimeOutLimit seconds of idle time 
     var signOutScript = '/index.php?action=logout'; //logout url 
     var keepAliveScript = '/ajax/handler-keep-me-alive.php'; //php page to handle ajax request to keep the session alive 
     var dialogCountdown = '#dialog-countdown'; // the lable that is used to display the counter 
     var idleTimeout= '#idleTimeout'; //the div that is used for the dialog 

     $(function(){ 

      //start the idle time out counter 
      startTimeoutCounter(); 

      $(idleTimeout).dialog({ 
       resizable: false, 
       autoOpen: false, 
       width: 400, 
       open: function(){ 
        updateTimeoutCounter(); 
       }, 
       buttons: { 
        "Yes, Keep working": function(e) { 
         $.ajax({  
          url: keepAliveScript,  
          success: function(data) { 
           startTimeoutCounter(); 
           $(idleTimeout).dialog("close"); 
          } 
         }); 
        }, 
        "No, End Session": function(e){ 
         forceLogOut(); 
         $(this).dialog('close');     
        } 
       } 
      }); 
     }); 


     function startTimeoutCounter(){ 
      timer = closeDialogAfter; 
      $(dialogCountdown).text(timer); 

      setTimeout(function(){ 
       $(idleTimeout).dialog("open"); 
      }, idleTimeOutLimit * 1000); 
     } 

     function updateTimeoutCounter(){ 

      if( $(idleTimeout).dialog("isOpen")){ 

       setTimeout(function(){ 
        timer = timer -1; 
        $(dialogCountdown).text(timer); 
        (timer < 2) ? forceLogOut() : updateTimeoutCounter(); 
       }, 1000); 
      } else 
       $(dialogCountdown).text(closeDialogAfter) 
     } 

     function forceLogOut(){ 
      window.location = signOutScript; 
     } 
    }); 
</script> 

Answer 2

正如你所說，你需要檢查對話框打開之前的時間。當頁面加載時，您可以假設完整的1800秒。

我想你可能想要類似這樣的東西（請參閱下面的代碼和註釋中的註釋）。

<!-- This script will alert a user before forcing to logout --> 
<script type="text/javascript"> 
$(function() { 
    var timer; 
    var closeDialogAfter = 180; //The default counter value 
    var idleTimeOutLimit = <?php echo $sessionTimeoutValue ?>; //Time after which 
    var signOutScript = '/index.php?action=logout'; //logout url 
    var keepAliveScript = '/ajax/handler-keep-me-alive.php'; //php page to handle ajax request to keep the session alive 
    var getSessionTimeScript = '/ajax/get_session_time.php'; //php page to handle ajax request for the remaining session length 
    var $dialogCountdown = $('#dialog-countdown'); //the container used to display the counter 
    var $idleTimeout = $('#idleTimeout'); //the div that is used for the dialog 

    function startTimeoutCounter(t) { 
     t = Math.max(closeDialogAfter, parseInt(t, 10) || 0); 
     $idleTimeout.dialog("close"); 
     setTimeout(getSessionTimeRemaining, (t - closeDialogAfter) * 1000); 
    } 
    function updateTimeoutCounter() { 
     if($idleTimeout.dialog("isOpen")) { 
      setTimeout(function() { 
       timer = timer - 1; 
       $dialogCountdown.text(timer); 
       if(timer < 2) { 
        // Here, forceLogOut() can't be assumed because 
        // the session may have been kept alive from another tab. 
        // Therefore, call getSessionTimeRemaining(). 
        getSessionTimeRemaining(); 
       } else { 
        updateTimeoutCounter(); 
       } 
      }, 1000); 
     } else { 
      $dialogCountdown.text(closeDialogAfter); 
     } 
    } 
    function forceLogOut() { 
     $idleTimeout.dialog("close"); 
     window.location = signOutScript; 
    } 
    function getSessionTimeRemaining() { 
     $.get(getSessionTimeScript).then(function(t) { 
      t = parseInt(t, 10) || 0; 
      if(t <= 0) { 
       forceLogOut(); 
      } else if(t <= closeDialogAfter) { 
       timer = closeDialogAfter; 
       $dialogCountdown.text(timer); 
       $idleTimeout.dialog("open"); 
      } else { 
       startTimeoutCounter(t); 
      } 
     }, function(error) { 
      // Something went wrong, safest action is logout 
      // This will only happen under abnormal circumstances 
      console.error(error); 
      forceLogOut(); 
     }); 
    }; 
    function keepAlive() { 
     $.get(keepAliveScript).then(startTimeoutCounter); 
    } 

    $idleTimeout.dialog({ 
     resizable: false, 
     autoOpen: false, 
     width: 400, 
     open: updateTimeoutCounter, 
     buttons: { 
      "Yes, Keep working": keepAlive, 
      "No, End Session": forceLogOut 
     } 
    }); 
    // On page load, the session should have been reset by the script that serves this page, 
    // therefore no need to call keepAlive(), though that would do the same job. 
    startTimeoutCounter(idleTimeOutLimit); 
}); 
</script> 

你會看到主要的結構差異是$(function() {...})現在包裝一切。這避免了使用全局名稱空間的需要。

新功能getSessionTimeRemaining()及其服務器端對應getSessionTimeScript是允許多個選項卡響應會話超時的核心。

兩個腳本keepAliveScript和getSessionTimeScript（可以是具有不同查詢字符串的相同腳本）都必須以秒爲單位返回時間t。 t被認爲是一個字符串，它被轉換爲數字parseInt()。您可能希望返回稍微少於實際會話時間的時間，從而允許短暫的「寬限期」。你不想要的是給用戶希望在會話已經過期時保持會話。

功能startTimeoutCounter(t)現在接受秒的時間，以便它可以在任何時間保持，這並不一定是完整的1800秒，所以根據呼叫是否來自keepAlive()或getSessionTimeRemaining()（異步）工作。

新功能keepAlive()允許整理「按鈕」的定義。

全部完全未經測試。你可能仍然需要修補它。