"Tick" 使用 cookie 维护持久倒数计时器时出现问题

Question

以下问题需要查看以下外部资源：

不，这不是关于 SO 的其他 "Cookie Timer not working" 问题之一。 ;)

我制作了一个持久的倒数计时器，它使用 cookie 来保存特定用户的倒数状态，而不管浏览器重新加载或重新启动。一切都很好，除了当我使用 jQuery Countdown 的 "ticks" 创建回调时…

实际上，如果我让计时器运行不重新加载页面，回调就会起作用。但是一旦页面重新加载，其中一个回调就不起作用了——而其中一个确实起作用了。

无论如何工作的回调是检查计时器结束的回调。不起作用的（重新加载后）是检查 "halfway" 点的那个。

这是代码……

$(document).ready(function()
{
   if (!Cookies.get('cdTime'))
   {
      var now = $.now(); // First time on page
      var timerSet = 30; // Amout of time (sec)
      var halfway = timerSet / 2;
      Cookies.set('firstTime', now,
      {
         expires: 7,
         path: '/'
      });
      Cookies.set('cdTime', timerSet,
      {
         expires: 7,
         path: '/'
      });
      var runTimer = Cookies.get('cdTime');
   }
   else
   {
      var currentTime = $.now();
      var usedTime = (currentTime - Cookies.get('firstTime')) / 1000; // Calculate and convert to sec
      var runTimer = Cookies.get('cdTime') - usedTime;
   }
   $('#cd').countdown({
      until: runTimer,
      compact: true,
      onExpiry: endCountdown,
      onTick: callBacks,
      layout: '{sn} seconds left...'
   });

   function callBacks(periods)
   {
      if ($.countdown.periodsToSeconds(periods) <= halfway)
      {
         $('#cd').addClass('halfway');
      }
      else if ($.countdown.periodsToSeconds(periods) === 0)
      {
         endCountdown();
      }
   }

   function endCountdown()
   {
      $('#cd').removeClass('halfway').addClass('ended');
      $('#cd').html('&#9829;');
   }
});

body {
    margin: 1em;
    font: 2em/1.4em 'Helvetica Neue', 'Helvetica','Arial', sans-serif;
    color: #333;
}
#cd {
    margin-top: 2em;
   font-family: 'Source Code Pro','Andale Mono',Monaco,'Courier New',monospace;
   font-size: 30px;
    font-weight: 100;
}
.halfway {
    color: #0000ff;
}
.ended {
    color: #ff0000;
   font-size: 125% !important;
   line-height: 0;
}
header, footer
{
   width:66%;
   font-size: 18px;
    line-height: 1.4em;
}
footer
{
   position: absolute;
   bottom: 0;
   margin-bottom: 1.5em;
   font-style: italic;
   color:  #ffa500;
}
.highlight
{
   background: #FFFBCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
<header>This countdown timer uses <a href="http://keith-wood.name/countdown.html">jQuery Countdown</a>, by Keith Wood, and <a href="https://github.com/js-cookie/js-cookie">JavaScript Cookie</a> to work &#8212; it will continue itsa countdown regardless of browser reloads or reboots (really, try it!). <span class="highlight">Oh, and it works on mobile too</span>.</header>
<div id="cd"></div>
<footer>(Clear the “firstTime” and “cdTime" Cookies and then reload the page to start the timer over.)</footer>

可在此处找到工作示例：

http://codepen.io/ProfessorSamoff/pen/xqXrgx

在不重新加载页面的情况下观看一遍，然后按照屏幕上的说明再次启动计时器并尝试重新加载。

关于为什么会发生这种情况有什么想法吗？

谢谢！

蒂姆

Answer 1

我不是 100%，但我认为 halfway 未定义。它仅在首次加载页面时设置。

而不是 if ($.countdown.periodsToSeconds(periods) <= halfway) 试试 if ($.countdown.periodsToSeconds(periods) <= halftime)

在顶部，而不是 var timerSet = 30; 在第一个 if 语句之前放置 totalTime = 30; 和 halftime = Math.floor(totalTime / 2)

"Tick" 使用 cookie 维护持久倒数计时器时出现问题

"Tick" issue while using cookies to maintain a persistent countdown timer

javascript

jquery

cookies

timer

countdown