刷新页面时PHP Timer停止重新启动答案

【问题标题】：PHP Timer stop re-starting when refreshing the page刷新页面时PHP Timer停止重新启动
【发布时间】：2019-04-15 12:06:53
【问题描述】：

我的 Quiz Web 应用程序有一个计时器，但每次用户转到下一个问题或刷新页面时计时器都会重置。

我试图将剩余时间保存到一个变量中，但我不知道。我是初学者，有些会有所帮助。

<span id="countdown" class="timer"></span>
<script>
var seconds = 15;
    function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
    if (seconds == 0) {
        clearInterval(countdownTimer);
        header("location:account.php?q=result&eid=5cb44b236f3b1");
    } else {    
        seconds--;
    }
    }
var countdownTimer = setInterval('secondPassed()', 1000);
</script>

我希望每个页面或每次用户刷新页面时都使用相同的计时器。感谢您的宝贵时间！

【问题讨论】：

一个php脚本只运行一次并且不记得上次调用发生了什么。所以你需要以某种方式记住剩余的秒数——在 $_SESSION 变量中最简单。查看sessions 以了解如何实现它。或将它们保存在用户的浏览器中（作为 cookie，在 localStorage 中） - 但请注意，用户可以更改这些存储的值。或当用户转到下一个问题时不要重新加载脚本->查看 ajax

标签： javascript php

【解决方案1】：

一种解决方案是使用会话变量。您所做的是存储测验开始的时间并据此进行倒计时。请注意，您只需要在第一页上设置 startTime 变量。

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php

if($_SESSION["startTime"] == null)
{
  $_SESSION["startTime"] = time();
}

?>
<script type="text/javascript">
// Timer script
// Get start time of quiz, current time and calculate time remaining
var startTime = "<?php echo $_SESSION["startTime"] ?>"; 

//...Rest of timer script.

</script>
</body>
</html>

【讨论】：

我想我理解这背后的逻辑，但我仍然不知道我应该如何在我的页面中实现它。 :(
我已经编辑了我的代码。现在我们检查我们设置为当前时间的会话变量是否为空。现在，此变量将在您的整个用户会话中持续存在，并且可以在刷新页面或在页面之间移动后访问。
没用，也许我做错了什么但它没用，刷新时仍然重置..

【解决方案2】：

要保存数据并与其他页面共享，您需要使用存储。在客户端，我们有Cookie Storage、Local Storage 和Session Storage (Client Side)。在服务器端我们可以使用cookie 和Session (server side)。

所以首先你需要在最后保存当前剩余的秒数，所以每次减少秒数时，你也需要更新存储。

当您刷新站点时，首先您需要从存储中获取剩余的秒数。如果没有数据（可能是第一次），需要加载默认时间，否则加载剩余时间。

看这个，这里我用的是本地存储。

<div id='countdown'></div>

<script>

    var seconds = localStorage.getItem('remainTime'); //gettting saved time from localstorage

    if(seconds == null || seconds == undefined){
      seconds = 15; //default time
    }

    function secondPassed() {
      var minutes = Math.round((seconds - 30)/60);
      var remainingSeconds = seconds % 60;
      if (remainingSeconds < 10) {
          remainingSeconds = "0" + remainingSeconds; 
      }
      document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
      if (seconds == 0) {
          clearInterval(countdownTimer);
          header("location:account.php?q=result&eid=5cb44b236f3b1");
      } else {    
          seconds--;
          localStorage.setItem('remainTime',seconds); //saving time to localstorage
      }
    }


    var countdownTimer = setInterval('secondPassed()', 1000);
</script>

https://codepen.io/anon/pen/oOGRpp

但最好将其保存在您的 SESSION 中并使用 Ajax request 进行更新。（为了更安全的目的）

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 好的答案将始终解释所做的事情以及为什么以这种方式完成，不仅是为了 OP，也是为了 SO 的未来访问者。跨度>
是的，你是对的，我更新了我的答案，谢谢@JayBlanchard

【解决方案3】：

在更新用户数据时，我还需要一个用于我的安全概念的计时器，现在我已经找到了。

这是我的代码：（我的解决方案使用了 codeigniter）

session()->set('can_edit_profile_until', time() + 300); // 5 minutes

我检查的代码：

$session = session();
        
        if( ! $session->has('can_edit_profile_until')) {

            return redirect()->to("/profile/authenticate");
        }

我在 SO 中找到的 JavaScript：

<?php
$remaining_time = session()->get('can_edit_profile_until') - time();
?>
<script>
    var seconds = <?= $remaining_time ?>;
    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Expired";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('secondPassed()', 1000);
</script>

和显示代码：

<span id="countdown" class="timer"></span>

如果有任何问题我会帮助他们回答。

【讨论】：