jQuery 倒计时在暂停时运行答案

【问题标题】：jQuery countdown running when it's pausedjQuery 倒计时在暂停时运行
【发布时间】：2013-04-10 11:43:08
【问题描述】：

我正在使用 Keith Wood 的 jQuery 倒计时计时器。 http://keith-wood.name/countdown.html

我想要实现的是带有停止和恢复按钮的计数，以及添加和减去分钟和秒的控件：

我创建一个计数（从 0 到 60 分钟）并立即暂停，如下所示：

$('#contador_tiempo').countdown({
    since: 0,
    format: 'MS',
    layout: '{mnn}{sep}{snn}'
});

$('#contador_tiempo').countdown('pause');

但它似乎仍在后台运行。当我单击按钮进行加减时，函数会在该背景计数器之上执行操作，而不是在显示的计数器之上。

JSFiddle 上的完整代码，行为再现：

http://jsfiddle.net/J2XHm/4/

（玩一下控件，您会发现它一直在计数，尽管它已暂停。）

【问题讨论】：

看起来pause 和getTimes 没有互相配合。 getTimes 似乎在不断更新。当删除其中一个单击事件中的所有代码并仅添加 $('#contador_tiempo').countdown('getTimes') 时，即使您在开始时将其暂停，您也可以看到数字数组不断增加。这可能是一个错误。 pause 的文档指出：No onTick or onExpiry events are triggered while the countdown is paused. 这表明它不应该计算任何时间。我会联系插件的作者以获取相关信息。
只是补充一点，您应该先联系插件的作者，然后再询问 SO 或至少同时联系。您可能会在 SO 上找到一种解决方法，但作者可能会告诉您您做错了什么，或者发现一个错误被指出并修复它，而不是您最终得到一个 hacky 解决方法。
我已经向他发送了一封包含此问题的电子邮件，以便他查看。我希望我们能解决这个问题！谢谢。
是的，我过去曾与他联系过，但我认为公开此消息将有助于将来的其他人。
是的，你是对的。这对未来的用户来说是很好的信息。无论如何，我 +1 编辑了您的问题，因为不清楚为什么它会这样，因此我认为总的来说这是一个好问题。希望作者知道发生了什么:)

标签： javascript jquery countdown

【解决方案1】：

是的，“getTimes”命令中有一个错误 - 它会在暂停时重新计算。我将在下一个版本（1.6.2）中进行更正，但同时您可以更改 _getTimesPlugin 函数：

_getTimesPlugin: function(target) {
    var inst = $.data(target, this.propertyName);
    return (!inst ? null : (inst._hold == 'pause' ? inst._savePeriods : (!inst._hold ? inst._periods :
        this._calculatePeriods(inst, inst._show, inst.options.significant, new Date()))));
},

【讨论】：

【解决方案2】：

如果您可以接受轻量级代码，即不使用 jQuery 倒数计时器，以下内容可能会对您有所帮助：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://localhost/web/JavaScript/jQuery/jquery"></script>
<script type="text/javascript">
    var countUpSeconds = 0;
    var interval = null;
    function displayTime() {
          $("#timeContainer").text(format(Math.floor(countUpSeconds/60))+":"+format(countUpSeconds%60));
    }
    function playStop() {
        if(interval) {interval=window.clearInterval(interval);}
        else {interval = window.setInterval(countUp, 1000);}
    }
    function countUp() {
        ++countUpSeconds;
        if(countUpSeconds >= 3600) {/* do something when countup is reached*/}
        displayTime();
    }
    function format(s) {return s<10 ? "0"+s : s;}
    $(function() {
        displayTime();
        $("#playStop").on("click", function () { playStop(); } );
        $("#addMin").on("click", function () { countUpSeconds += 60; displayTime(); } );
        $("#subMin").on("click", function () { countUpSeconds = Math.max(0, countUpSeconds-60); displayTime(); } );
        $("#addSec").on("click", function () { countUpSeconds += 1; displayTime(); } );
        $("#subSec").on("click", function () { countUpSeconds = Math.max(0, countUpSeconds-1); displayTime(); } );

    });
</script>
</head>
<body>
<div id="timeContainer"></div>
<button id="playStop">Play/Stop</button>
<button id="addMin">+1 minute</button>
<button id="subMin">-1 minute</button>
<button id="addSec">+1 second</button>
<button id="subSec">-1 second</button>
</body>
</html>

【讨论】：