使用 Cookie 维护永久性倒数计时器时"Tick"问题

Question

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

• j查询倒计时
• 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)

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