0

我正在开发一个 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()">
4

2 回答 2

3

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

var timer;

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

if(typeof timer != "undefined")

原因：有一个 ID 为“timer”的元素，你可以timer不经建议的修改直接使用它，timer 永远不会是“undefined”类型

或者简单地为超时变量使用另一个名称。

于 2012-11-19T21:57:52.457 回答
1

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

  1. 即使您将间隔设置为例如一秒，调用之间也不一定是一秒。
  2. 对于超时和间隔，始终传入函数，而不是字符串：setInterval(increaseCounter, 1000)
  3. 没有理由从 DOM 中解析值。这样做是非常低效的。如果您改为使用日期差异，您可以简单地存储一个变量（开始时间），并获取自该时间以来的小时/分钟/秒。您可以随时更新视图，并且它始终是准确的。
  4. 我个人更喜欢“递归”超时而不是间隔。对于间隔，当您希望间隔停止时，您总是需要采取额外的步骤来清除间隔。您可以通过几种不同的方式停止超时循环，并且往往更容易理解正在发生的事情。超时还允许我们灵活地更改调用之间的时间（此处不相关）。
  5. 内联（在 HTML 元素上）绑定事件处理程序被认为是一种不好的做法。如果您已经在使用 jQuery，那真的没有任何借口，因为 jQuery 让这个过程变得非常简单。
  6. 我摆脱了您拥有的“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);
        }
    });
})();
于 2012-11-19T22:15:27.797 回答