javascript setInterval未按时运行

时间:2015-12-18 16:20:43

标签: javascript jquery

我写了一个无法正常工作的计时器方法。它应该显示在表单上经过的时间,但它按2或3计数而不是每秒计数一次。什么可能导致这种行为,我该如何解决?

我的代码:

function startTimer() {
  var minutes, seconds;
  
  setInterval(function () {
    if (!isPaused) {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);
      
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      
      $('#TimeLabel').text("Form Time: " + minutes + ":" + seconds);
      
      ++timer;
    }
  }, 1000);
}

上面的代码显示“表格时间:00:01”,然后是“表格时间:00:04”,然后是“表格时间:00:07”等。

4 个答案:

答案 0 :(得分:3)

这是我想出的一个例子。它使用时间,以便不依赖于 setInterval 的准确性。希望这有帮助!

function startTimer(){
        var minutes,
            seconds;

        var startTime = new Date;

        setInterval(function(){

            var currentTime = new Date;
            seconds = currentTime.getSeconds() - startTime.getSeconds();

            if(seconds < 0){
                seconds += 60;
            }else if(seconds === 0){
                minutes = currentTime.getMinutes() - startTime.getMinutes();
            }

            console.log(minutes + ':' + seconds);

        }, 100);
}
startTimer();

答案 1 :(得分:0)

这取决于javascript的异步性质以及它在单个线程上运行的事实。

网上有很多文章解释 事件循环 的工作方式,因此,我认为没有必要在此解释。

你只需要记住: setTimeoutsetInterval或其他类似说明将在delay time作为参数传递后的第一个可用时间执行。

因此,window.setTimeout(function() { console.log('Hello World'); }, 1000);并不意味着将在1000毫秒(1秒)后完全执行。

它基本上意味着等待100ms,当事件循环是空闲时,调用作为参数传递的回调。

further reading

答案 2 :(得分:-1)

我刚刚在控制台中使用了代码,发现它在那里工作正常,代码是:

items(Set)

因此可能存在增加计时器值或确保函数startTimer只调用一次的事情。

答案 3 :(得分:-1)

问题可能与不声明所有变量有关。当我在控制台中运行此版本时,它可以正常工作:

function startTimer() {
  var minutes, seconds, isPaused = false, timer = 1;
  
  setInterval(function () {
    if (!isPaused) {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);
      
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      
      console.log("Form Time: " + minutes + ":" + seconds);
      
      timer++;
    }
  }, 1000);
}

startTimer();