Berikut ini memiliki interval delay yang tidak stabil.
<!DOCTYPE html>
<html>
<head>
<title>Count 1 to 10</title>
<style>
#counter {
font-size: 5em;
text-align: center;
}
</style>
</head>
<body>
<div id="counter">1</div>
<script>
var counter = document.getElementById("counter");
var currentNumber = 1;
function animateCounter() {
if (currentNumber < 1000) {
currentNumber++;
counter.innerHTML = currentNumber;
setTimeout(animateCounter, 500); // delay setengah detik
}
}
animateCounter();
</script>
</body>
</html>
Jika kode selanjutnya memiliki delay yang stabil.
<!DOCTYPE html>
<html>
<head>
<title>Count 1 to 10</title>
<style>
#counter {
font-size: 5em;
text-align: center;
}
</style>
</head>
<body>
<div id="counter">1</div>
<script>
var counter = document.getElementById("counter");
var currentNumber = 1;
var startTime = null;
var delay = 500; // delay setengah detik
function animateCounter(timestamp) {
if (!startTime) startTime = timestamp;
var progress = timestamp - startTime;
if (progress > delay && currentNumber < 1000) {
currentNumber++;
counter.innerHTML = currentNumber;
startTime = timestamp;
}
if (currentNumber < 1000) {
requestAnimationFrame(animateCounter);
}
}
requestAnimationFrame(animateCounter);
</script>
</body>
</html>