Javascript - 倒数计时器不是每秒递增

Question

谁能告诉我我做错了什么？我的计时器显示为一次增量 2 或 3 或 4 秒，而不是每秒。

var call_s = 0;
var call_m = 0;
var call_h = 0;
var call_connected = null;
var display = null ;
function connected_timer_start(tototo) {
  call_connected  = setTimeout(function() {
    call_s++;

    if (call_s>59) { 
      call_s = 0;
      call_m++;
    }

    if (call_m>59){
      call_m = 0;
      call_h++;
    }


    display = (call_h < 10 ? '0' : '') + call_h + ':' + 
                  (call_m < 10 ? '0' : '') + call_m  + ':' + 
                  (call_s < 10 ? '0' : '') + call_s;


    console.log(display);
    connected_timer_start();
  }, 1000);
}


function connected_timer_stop() {
  call_s = 0;
  call_m = 0;
  call_h = 0;
  clearTimeout(call_connected);
  call_connected = null;

  document.getElementById('display').style.display = 'none';
}

Answer 1

正如 jfriend00 所说，您不应该使用 setTimeout() 来计算时间值，因为它不可靠。使用 Date() 的代码版本实际上更短、更简单:

    var begining_timestamp = null;
    var call_connected = null;
    var call_ms = null;
    var display = null ;

    function connected_timer_start() {
        if (call_connected==null) {
            begining_timestamp = (new Date()).getTime();
            count();
        } else {
            console.log('One timer is already started!');
        }
    }

    function count() {
        call_connected  = setTimeout(function() {
            getCallLength();
            count();
        }, 1000);
    }

    function getCallLength() {
        call_ms = (new Date()).getTime() - begining_timestamp;
        var tmp_date = new Date(null);
        tmp_date.setSeconds(call_ms/1000);
        display = tmp_date.toISOString().substr(11, 8);
        console.log(display);
    }


    function connected_timer_stop() {
        clearTimeout(call_connected);
        getCallLength();
        call_connected = null;
        document.getElementById('display').style.display = 'none';
    }

我看到了这种方法的几个优点:

• 时间是准确的，即使 setTimeout 每 2 秒触发一次或随机触发一次，您的通话时长也将是准确的
• 通话结束时通话时长会更新，以确保其完全准确
• 如果您需要的话，您可以将通话时间缩短至毫秒
• call_ms 变量不会在通话结束时清除，而是在通话开始时清除；这意味着在两次调用之间，您始终可以以毫秒为单位表示最后一次调用的长度
• 正如 AlexAtNet 所建议的，您可能会错误地多次启动计时器；因此 connected_timer_start 现在检查计时器是否尚未启动