Question

我有一个我正在开发的ColdFusion应用程序需要一个可以启动，暂停和清除的计时器。我的问题是虽然它在IE9，Firefox，Opera，Chrome和Safari中运行得非常好，但它在IE8（这是我的用户群的很大一部分）中不起作用。问题是当我点击并尝试停止计时器而不是计时器停止时，它会加速。它只在IE8中运行（其他浏览器工作正常）。

- 时钟代码 -

function check_timer() {
    if($('#timer').hasClass('start')) {
        $('#timer').val("Stop Timer");
        timer = setInterval ( "increaseCounter()", 1000 );
        $('#timer').removeClass('start')
    }
    else {
        if(typeof timer != "undefined") {
            clearInterval(timer); 
        }

        $('#timer').val("Start Timer");
        $('#timer').addClass('start')
    }
}

function increaseCounter() {
    var secVal;
    var minVal;
    secVal = parseInt($('#counterSec').html(),10) 
    minVal = parseInt($('#counterMin').html(),10)
    if(secVal != 59) {
        secVal = secVal + 1;
        if(secVal < 10) {
            secVal = secVal.toString();
            secVal = "0" + secVal;
        }
        $('#counterSec').html(secVal);
    }
    else {
        if(minVal != 59){
            minVal = minVal + 1;
            if(minVal < 10) {
                minVal = minVal.toString();
                minVal = "0" + minVal;
            }
            $('#counterMin').html(minVal); 
        }
        else {
            $('#counterHour').html((parseInt($('#counterHour').html(),10)+1));
            $('#counterMin').html("00");
        }
        $('#counterSec').html("00");
    }
}

- 包含时钟的DIV -

<div class="supportClock" style="width:150px; border-radius:20px;" align="center">
            <span id="addZeroHour"></span>
            <span id="counterHour">00</span>
            :<span id="addZeroMin"></span>
            <span id="counterMin">00</span>
            :<span id="addZeroSec"></span>
            <span id="counterSec">00</span>
        </div>

- 按钮激活时钟 -

<input type="button" id="timer" class="start" value="Start Timer" onclick="check_timer()">

Answer 1

将其添加到脚本的顶部（在函数外部）：

var timer;

否则你永远不会遇到这个分支：

if(typeof timer != "undefined")

原因：有一个ID为“timer”的元素，您可以使用timer访问它而不进行建议的修改，并且计时器永远不会是“undefined”类型

或者只是使用其他名称作为超时变量。

Answer 2

看看这里：http://jsfiddle.net/qEATW/3/

即使您将间隔设置为例如一秒，呼叫之间也不一定是一秒。

对于超时和间隔，始终传递函数，绝不传递字符串：setInterval(increaseCounter, 1000)

没有理由解析DOM中的值。这样做非常低效。如果你改为使用日期差异，你可以简单地存储一个变量（开始时间），并从那时起获得小时/分钟/秒。您可以随时更新视图，但它始终是准确的。

我个人更喜欢“递归”超时而不是间隔。使用间隔时，您总是需要采取额外的步骤来清除您希望它停止的间隔。您可以通过几种不同的方式停止超时循环，并且更容易理解正在发生的事情。超时还允许我们灵活地改变呼叫之间的时间（这不是相关的）。

将事件处理程序内联（在HTML元素上）绑定是一种不好的做法。如果你已经在使用jQuery，那么就没有理由，因为jQuery使得这个过程非常简单。

我摆脱了你所拥有的“addZero”跨度。我不确定你在用它们做什么，但它们不是必需的，只会使标记混乱。

HTML：

<div class="supportClock" style="width:150px; border-radius:20px;" align="center">
    <span id="counterHour">00</span>
    : <span id="counterMin">00</span>
    : <span id="counterSec">00</span>
</div>
<input type="button" id="timer" class="start" value="Start Timer">

JS：

(function(){
    var clock = $(".supportClock"),
        hr = $("#counterHour"),
        min = $("#counterMin"),
        sec = $("#counterSec"),       
        running = false,
        startTime,
        timeout;

    function updateClock(){
        var time = (new Date()) - startTime,
            hrs = Math.floor(time / 1000 / 60 / 60),
            mins = Math.floor(time / 1000 / 60 - hrs * 60),
            secs = Math.floor(time / 1000 - mins * 60 - hrs * 60 * 60);

        hr.text(hrs > 9 ? hrs : '0' + hrs);
        min.text(mins > 9 ? mins: '0' + mins);
        sec.text(secs > 9 ? secs : '0' + secs);

        timeout = setTimeout(updateClock, 1000/2);
    }

    $("#timer").click(function(){
        if (!running){
            running = true;
            this.value = "Stop Timer";
            startTime = new Date();
            updateClock();
        }
        else{
            running = false;
            this.value = "Start Timer";
            clearTimeout(timeout);
        }
    });
})();

Javascript clearInterval正在加速计时器而不是暂停它

2 个答案: