我正在寻找一个关于我的番茄钟时钟(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
});