暂停 jquery 倒计时按钮
Posted
技术标签:
【中文标题】暂停 jquery 倒计时按钮【英文标题】：pausing jquery countdown timer button 【发布时间】：2015-11-12 15:39:01 【问题描述】：我已经查找了许多暂停和恢复 jQuery 倒计时的方法，但我这辈子无法让它与我在这里的东西一起工作。
谁能指出我需要附加到暂停按钮以暂停/恢复的正确方向？
我还想让计时器在单击删除 10 秒或将时间减半时不超过 0，它超过 0 只是停在 0 并播放声音。它目前变为负数，然后反弹回正数并继续倒计时，这不是我期望的：-/
目前有： jsFiddle
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="timercontainer">
<div id="timerdiv">
</div>
<div class="section">
<input id="ten" type="submit" value="start 10 seconds">
<input id="twenty" type="submit" value="start 20 seconds">
<input id="thirty" type="submit" value="start 30 seconds">
<input id="one-min" type="submit" value="start 1 min">
<input id="five-min" type="submit" value="start 5 min">
</div>
<div class="section">
<input id="add" type="submit" value="add 10 seconds">
<input id="remove" type="submit" value="remove 10 seconds"></div>
<div class="section">
<input id="half" type="submit" value="cut time in half">
<input id="double" type="submit" value="double time"><br />
<input id="pause" type="submit" value="pause">
</div>
</body>
javascript
pingSound = new Audio("https://www.sounddogs.com/previews/2176/mp3/115553_SOUNDDOGS__ca.mp3");
pingSoundNear = new Audio("https://www.sounddogs.com/previews/25/mp3/234977_SOUNDDOGS__cl.mp3");
pingSound.preload = "auto";
pingSoundNear.preload = "auto";
timeout = null;
time = null;
$('#ten').on('click', function()
startCountdown(10, 1000, end);
);
$('#twenty').on('click', function()
startCountdown(20, 1000, end);
);
$('#thirty').on('click', function()
startCountdown(30, 1000, end);
);
$('#one-min').on('click', function()
startCountdown(60, 1000, end);
);
$('#five-min').on('click', function()
startCountdown(300, 1000, end);
);
$('#pause').on('click', function()
time = clearInterval(time);
);
$('#add').on('click', function()
time = time+10;
startCountdown(time, 1000, end);
);
$('#remove').on('click', function()
time = time-10;
startCountdown(time, 1000, end);
);
$('#half').on('click', function()
time = time *.5;
roundedTime = Math.round(time);
startCountdown(roundedTime, 1000, end);
);
$('#double').on('click', function()
time = time *2;
roundedTime = Math.round(time);
startCountdown(roundedTime, 1000, end);
);
$('#pause').click(function ()
if (clicked)
counter = setInterval(function ()
var m = $('.min', timer),
s = $('.sec', timer);
if (seconds === 0)
minutes--;
seconds = 59;
else
seconds--;
m.text(minutes);
s.text(leadingZero(seconds));
, 1000);
else
clearInterval(counter);
clicked = !clicked;
);
function startCountdown(timen, pause, callback)
time = timen;
$('#timerdiv').html(timen);
if (timen < 10)
pingSoundNear.play();
if (timen > 10)
pingSoundNear.pause();
if (timen <= 0)
pingSound.play();
pingSoundNear.pause();
else
clearTimeout(timeout);
timeout = setTimeout(function()
startCountdown(timen-1, pause, callback)
, pause);
function end()
/* alert(); */
pingSound.play();
【问题讨论】：
【参考方案1】：有一个解决方案here 我觉得很酷。让间隔继续下去，只有当 paused 变量设置为 false 时才更新显示。
您可以在 setInterval 中运行的函数的顶部添加一个 if 语句，以检查计时器是否暂停，如果没有，则正常继续，如果是，则不要执行任何操作。
【讨论】：
我让你的解决方案可以暂停，现在我不确定我需要放什么来取消暂停。我可以让它在特定时间开始，但我不确定如何从它停止的地方开始。 jsfiddle.net/tfm4th/xhcwt2vo/11 当您取消暂停时，通过传递参数中的 time 变量，使用以下参数 (time,1000,end) 运行 startCountdown 函数，您的计时器应该使用它暂停的任何值，因为您更新函数顶部的时间变量。 我建议您将 time 的默认值设置为 0 否则，如果它们在 time 为空时取消暂停，您的函数将中断 谢谢，这就是问题所在，现在就像做梦一样。也谢谢布赖恩，即使你们都给了我关于不同事情的答案，我也不会让我接受 2 个答案。【参考方案2】：变量clicked 未在暂停按钮的单击处理程序中定义，这会破坏您的js。除此之外，您似乎走在正确的轨道上。
该变量应更改为isCountingDown 之类的内容，并在模块级别定义（其他变量位于顶部），然后需要根据计时器是否主动倒计时来切换。
如果isCountingDown 为真，则单击暂停按钮应清除间隔（暂停计时器），否则应恢复倒计时。
至于您的第二个问题，您只需将所需的逻辑添加到您的#remove 处理程序中，如果time 变量已设置为小于零，您将手动将其重置为零。这可以通过一个简单的条件来处理。
希望对您有所帮助。祝你好运！
【讨论】：
谢谢大家。好的，所以我将变量更改为 isCountingDown 并在函数“startCountdown”开始时将其添加为 true，但它似乎没有任何效果。我对js不是很流利，而且大部分是我找到的sn-ps合并在一起的代码。我觉得我可能需要在暂停的某个地方更改一个变量？对于第二个问题，我将该逻辑添加到 $('#remove').on('click', function() 正确吗？更新：jsfiddle.net/tfm4th/xhcwt2vo/10 得到了第二个使用条件语句想法的问题，谢谢。第一部分仍在苦苦挣扎，但我认为几乎就在那里。 问题是您在 startCountdown 中创建的计时器称为timeout，而您在暂停处理程序中清除的计时器称为time。为简单起见，请确保在启动和停止时始终使用相同的计时器变量名称。以上是关于暂停 jquery 倒计时按钮的主要内容，如果未能解决你的问题，请参考以下文章
页面显示多个计时器，有开始暂停按钮来控制倒计时的开关？？？？求大神指点