如果钳位最小值比非活动标签的1秒慢,如何解决setInterval问题?

时间:2015-10-22 00:44:26

标签: javascript settimeout

我正在寻找一个关于我的番茄钟时钟(FreeCodeCamp项目)延迟的问题,当我发现我现在已经完成了一分钟的测试时,我发现了这个问题。我检查了一下,它被推迟了。我使用了我的手机定时器,然后在标签上再次运行我的Pomodoro时钟,在其他标签上做了其他事情,比如观看了一个youtube vid等,并且在检查之后,时钟落后了25秒。我了解了有关非活动选项卡的setTimeout / setInterval问题。但是,无论如何我的setInterval都设置为1000ms,所以根据MDN,

  

在非活动标签中每秒不超过一次(1000毫秒)发射

我的setInterval不应该运行相同吗?然而它比1000毫秒慢。为什么以及如何解决这个问题?

我提供了一个简单的项目示例,删除了样式,但问题仍然存在。我想知道是否只有“太多”,可能我的代码结构正在减慢它?我不知道......

https://jsfiddle.net/gzygd3kn/1/

$(document).ready(function () {

  $("#start-button").on("click", function () {
    var field1 = document.getElementById("input-box");
    var field2 = document.getElementById("input-box2");
    if (field1.value == null || field2.value == null 
        || field1.value == "" || field2.value == "") {
      alert("Please enter session length.");
    } else {
      initialTimer();
      $(this).attr("disabled","true");
    }
  });


  function initialTimer () {
    var inputInitialTime = $(".input-initial-time").val();
    initializing(inputInitialTime, true);
    $(".break-text").css("border-bottom", "none");
    $(".activity-text").css("border-bottom", "solid 2px #31708f");
  }
  function breakTime () {
    var inputBreakTime = $(".input-break-time").val();
    initializing(inputBreakTime, false);
    $(".activity-text").css("border-bottom", "none");
    $(".break-text").css("border-bottom", "solid 2px #31708f");
  }

  function initializing (input, running) {
    var minutesToSeconds = input*60;
    var workTime = running;
    updateClock();

    var startTimer = setInterval(updateClock,1000);
        function updateClock () {
          var t = countDownMinutes(minutesToSeconds);
          if (t.total <= 0 && workTime == true) {
            clearInterval(startTimer);
            breakTime();
          } else if (t.total <= 0 && workTime == false) {
            clearInterval(startTimer);
            initialTimer();
          }
          document.getElementById("count-down").innerHTML = 
            (t.hours < 10 ? "0" : "") + t.hours + ":" 
            + (t.minutes < 10 ? "0" : "") + t.minutes + ":" 
            + (t.seconds < 10 ? "0" : "") + t.seconds;
          minutesToSeconds--;
        }
    $("#stop-button").on("click", function () {
      clearInterval(startTimer);
      $("#start-button").removeAttr("disabled");
    });    
  } // End of initializing()

  function countDownMinutes(secondsLeft) {
    var total = secondsLeft;
    var hours = Math.floor(secondsLeft / 3600); 
    var minutes = Math.floor(secondsLeft % 3600 / 60 );
    var seconds = Math.floor(secondsLeft % 60);

    return {
      'total': total,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };
  } // End of countDownMinutes

});

0 个答案:

没有答案