网页逐次显示数字的计数器实现问题求助

嘿，我懂你为啥头疼！这个问题简直是前端新手的经典踩坑点，ChatGPT没给你讲明白的话，我来给你掰扯清楚～

首先说为啥你的代码只显示最后一个数：JavaScript在浏览器里是单线程跑的，你的for循环执行速度快到离谱，浏览器根本没机会在每次循环的时候去更新页面显示。它会等整个循环跑完，才会腾出手来处理页面渲染，所以最后就只留下循环结束时的那个1000000了。

给你两个靠谱的解决方案，随便挑一个用：

方案1：用递归setTimeout实现 #

这个方法能让浏览器每次更新数字后都有时间渲染页面，代码改起来也简单：

<!DOCTYPE html>
<html>
<head>
<title>Compteur de 1 à 1000000</title>
</head>
<body>
<div id="counter"></div>
<script>
const counterElement = document.getElementById('counter');
let i = 1;

const updateCounter = () => {
  if (i <= 1000000) {
    counterElement.innerHTML = i;
    i++;
    // 这里的0不是真的等0秒，是让浏览器优先处理渲染再执行下一次更新
    // 要是觉得数字跳得太快，把0改成10/20这类数值就行，单位是毫秒
    setTimeout(updateCounter, 0);
  }
};

// 启动计数器
updateCounter();
</script>
</body>
</html>

方案2：用requestAnimationFrame更流畅 #

如果想要更丝滑的动画效果，推荐用requestAnimationFrame，它会和浏览器的渲染帧率同步，不会出现掉帧的情况：

<!DOCTYPE html>
<html>
<head>
<title>Compteur de 1 à 1000000</title>
</head>
<body>
<div id="counter"></div>
<script>
const counterElement = document.getElementById('counter');
let i = 1;

const updateCounter = () => {
  if (i <= 1000000) {
    counterElement.innerHTML = i;
    i++;
    // 让浏览器在准备好下一次渲染时执行更新
    requestAnimationFrame(updateCounter);
  }
};

// 启动计数器
updateCounter();
</script>
</body>
</html>

简单总结下核心逻辑：不能用同步循环一口气把所有数字都赋值完，得把每次数字更新拆成独立的任务，让浏览器有时间在任务间隙去渲染页面，这样就能看到数字逐个跳出来的效果啦～

备注：内容来源于stack exchange，提问作者digitalway