0

我有一个这样的倒计时：

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;
    }
};

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

JSF中。

4

4 回答 4

1

setInterval不准确。您应该使用Dates 来获得准确的时间，然后选择小于一秒的间隔以获得更平滑的时钟。这是一个演示！

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;
    }
};
于 2012-09-29T14:40:54.717 回答
1

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

var startTime = new Date().getTime();
setInterval(function() {
    var elapsed = new Date().getTime()-startTime;
    console.log("Been running for "+Math.floor(elapsed/1000)+" seconds");
},25);
于 2012-09-29T14:41:24.677 回答
0

那是因为 setInterval 并不意味着是一个高分辨率计时器。它不会每 1000 毫秒命中一次。您可能会在任一方向上摆动多达 20 到 30 毫秒，从而导致时钟关闭。

于 2012-09-29T14:40:38.257 回答
0

使用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 传递给回调），这意味着闭包是独立的 => 回调可以在任何地方定义。

于 2012-09-29T17:52:01.837 回答