延迟计时开始

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 在第一次运行您的函数之前等待一个时间间隔（在您的代码中为 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);
}

延迟计时开始

Lag on count up timer starting

javascript

events

timer

stopwatch

setinterval