Question

我有一个像这样的倒计时：

var countdown = {
    startInterval: function() {
        var count = 600
        var countorig = 600;
        var currentId = setInterval(function() {
            var min = (count - (count % 60)) / 60;
            var sec = count % 60;
            if (sec < 10) {
                $('#timer').html(min + ':0' + sec);
            } else {
                $('#timer').html(min + ':' + sec);
            }
            $('#time').val(countorig - count);
            if (count == 0) {
                $('#form').submit();
            }--count;
        }, 1000);
        countdown.intervalId = currentId;
    }
};

有效。但是如果我加载页面，倒计时就会开始，但它会像时钟那样“不圆”。

JSFiddle

Answer 1

setInterval并不确切。您应该使用Date代替，以获得准确的时间，然后选择小于一秒的间隔以获得更平滑的时钟。 Here’s a demo!

var countdown = {
    startInterval: function() {
        var count = 600;
        var start = new Date(); // The current date!

        var currentId = setInterval(function() {
            var difference = Math.max(0, count - (new Date() - start) / 1000 | 0);
            var min = difference / 60 | 0;
            var sec = difference % 60;

            $('#timer').text(min + ':' + (sec < 10 ? '0' : '') + sec);
            $('#time').val(difference);

            if(count === 0) {
                $('#form').submit();
            }
        }, 200);

        countdown.intervalId = currentId;
    }
};

Answer 2

假设你的计时器是准确的，这绝不是一个好主意。相反，使用增量计时。

var startTime = new Date().getTime();
setInterval(function() {
    var elapsed = new Date().getTime()-startTime;
    console.log("Been running for "+Math.floor(elapsed/1000)+" seconds");
},25);

Answer 3

这是因为setInterval不是高分辨率计时器。它不会在点上每1000毫秒命中一次。您可能在任一方向上摆动20到30毫秒，导致时钟关闭。

Answer 4

使用Date.now()，这是倒计时功能的快速示例（x是毫秒）

function countdown(x){
    var o = {future: Date.now()+x, last:-1, i:null}; // object so we can pass by-ref if req.

    o.i = setInterval( function() { // use o.i so we can clear interval
        var remain = o.future - Date.now(),
            secs = Math.floor( remain / 1000 ),
            mins = 0;

        if( remain < 0 ){ // finished, do whatever
            return clearInterval(o.i); // then clear & exit
        }

        if( secs === o.last ) return; // skip this iteration if it's not been a second
        o.last = secs; // else update last time

        // do whatever you want for this new second
        if( secs > 59 ) mins = Math.floor( secs / 60 ), secs = secs % 60;
        console.log(
            (mins < 10 ? '0'+mins : mins) + ':' +
            (secs < 10 ? '0'+secs : secs) + ' remain.'
        );
    }, 100);
}

如果您知道在IE中使用不会，请考虑将o作为参数添加到区间中的回调函数，并将其作为setInterval的最后一个参数（所以它作为第一个arg传递给回调，这意味着闭包是独立的=＆gt;回调可以在任何地方定义。

javascript倒计时口吃

4 个答案: