倒计时计时器启动滞后答案

【问题标题】：Lag on count up timer starting倒计时计时器启动滞后
【发布时间】：2017-06-29 20:18:32
【问题描述】：

在 JavaScript 中构建一个简单的计数计时器。当我单击开始按钮时，单击按钮和计时器开始之间存在延迟。有人可以解释这是为什么。我是 JavaScript 的初学者，所以我将不胜感激。

提前谢谢你

var startButton = document.getElementById("start");
var pauseButton = document.getElementById("pause");
var resetButton = document.getElementById("reset");
var minutesHTML = document.getElementById("minutes");
var secondsHTML = document.getElementById("seconds");
var seconds = 00;
var minutes = 00;
var myTimer = false;


startButton.onclick = startTimer;
pauseButton.onclick = pauseTimer;
resetButton.onclick = resetTimer;

function startTimer () {
	
	myTimer = setInterval (function () {
		
		if (seconds < 10) {
			secondsHTML.innerHTML = "0" + seconds;
		}
		if (seconds > 9) {
			secondsHTML.innerHTML = seconds;
		}
		
		
		seconds ++;
		
		if (seconds % 60 == 0) {
			minutes ++;
			seconds = 00;
		}
		
		if (minutes < 10) {
			minutesHTML.innerHTML = "0" + minutes;
		}
		
		if (minutes >= 10) {
			minutesHTML.innerHTML = minutes;
		}
		
	}		
	, 1000)
}


function pauseTimer () {
	clearInterval(myTimer);
}

function resetTimer () {
	seconds = 00;
	minutes = 00;
	secondsHTML.innerHTML = seconds;
	minutesHTML.innerHTML = minutes;
	
	console.log(secondsHTML + minutesHTML);
	clearInterval(myTimer);

}

body{
	background: tomato;
	text-align: center;
	margin: auto;
	font-size: 50px;
}

h1 {
	font-size: 20px;
}

.button-container {
	display: flex;
	margin: auto;
}

button {
	text-align: center;
	border: none;
	width: 20%;
	background: #fff;
	font-size: 20px;
	margin: auto;
}

<h1>TIMER</h1>


<p>
	<span id="minutes">00</span>
	:
	<span id="seconds">00</span>
</p>


<div class="button-container">
<button id="start"><p>START</p></button>
<button id = "pause"><p>PAUSE</p></button>
<button id = "reset"><p>RESET</p></button>
</div>

【问题讨论】：

Reasons for delays longer than specified
setTimout 和 setInterval 不保证准确以保持时间。它们是您等待回调执行的“最少”时间。这是因为 JavaScript 是单线程的，在当前执行上下文完成之前，回调无法运行。
当您可以插入可以在此处运行的代码 sn-p 时，请不要发布到第三方链接。随着时间的推移，第 3 方链接可能会变得不稳定，我们希望您的问题（及其代码）在未来很长一段时间内都具有相关性和可理解性。

标签： javascript events timer setinterval stopwatch

【解决方案1】：

setInterval 在第一次运行您的函数之前等待一段时间（您的代码中为 1000 毫秒）。

您可以在调用setInterval 之前自己调用该函数。这样一来，您会立即接到一个电话，然后每隔一秒接到一个电话，直到间隔被取消。

function tick () {

    if (seconds < 10) {
        secondsHTML.innerHTML = "0" + seconds;
    }
    if (seconds > 9) {
        secondsHTML.innerHTML = seconds;
    }


    seconds ++;

    if (seconds % 60 == 0) {
        minutes ++;
        seconds = 00;
    }

    if (minutes < 10) {
        minutesHTML.innerHTML = "0" + minutes;
    }

    if (minutes >= 10) {
        minutesHTML.innerHTML = minutes;
    }

}

function startTimer () {
    tick();   
    myTimer = setInterval(tick, 1000);
}

【讨论】：