计数计时器启动滞后

Question

在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>

Answer 1

setInterval等到间隔(代码中的1000ms(首次运行函数之前通过。

您可以在调用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);
}