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

Question

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

• jQuery Countdown
• JavaScript Cookie

不，这不是 SO 上的其他“Cookie 计时器不起作用”问题之一。 ;)

我制作了一个持久的倒计时器，它使用 cookie 来保存特定用户的倒计时器状态，无论浏览器重新加载或重新启动如何。一切都工作得很好，除了当我使用 jQuery Countdown 的“ticks”来创建回调时......

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

不管怎样，回调函数都会检查计时器是否结束。不起作用(重新加载后)的是检查“中途”点的那个。

这是代码...

$(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)