求助：如何在JavaScript循环中实现每秒依次打印1到100的数字？

嗨，作为JavaScript初学者，遇到这个问题太正常啦！你现在的代码是一次性把所有数字拼接完成后再显示，所以完全没有时间间隔。我给你两种简单易懂的解决方案，帮你实现每秒打印一个数字的效果：

方法一：递归调用setTimeout #

这种方法通过递归逻辑，每次打印完当前数字后，过1秒再触发下一次打印，逻辑非常直观：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Print 1 to 100 each Second</title>
</head>
<body>
<div id="printnum"></div>
<script>
let currentNum = 1;
const maxNum = 100;
const printArea = document.getElementById("printnum");

function printNextNumber() {
  // 当数字超过100时停止递归
  if (currentNum > maxNum) return;
  
  // 把当前数字追加到页面上
  printArea.innerHTML += `<p>${currentNum}</p>`;
  
  currentNum++;
  // 1秒后再次调用这个函数，打印下一个数字
  setTimeout(printNextNumber, 1000);
}

// 启动第一个数字的打印
printNextNumber();
</script>
</body>
</html>

方法二：使用setInterval定时器 #

另一种常用方式是用setInterval创建一个每秒执行一次的定时器，当数字达到100时清除定时器即可停止：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Print 1 to 100 each Second</title>
</head>
<body>
<div id="printnum"></div>
<script>
let currentNum = 1;
const maxNum = 100;
const printArea = document.getElementById("printnum");

// 创建每秒执行一次的定时器
const timer = setInterval(() => {
  if (currentNum > maxNum) {
    // 达到100后清除定时器，停止执行
    clearInterval(timer);
    return;
  }
  
  printArea.innerHTML += `<p>${currentNum}</p>`;
  currentNum++;
}, 1000);
</script>
</body>
</html>

为什么你之前的代码没生效？ #

你最初尝试用setTimeout但没成功，是因为循环会在瞬间执行完毕，所有的setTimeout都被设置为1秒后触发——结果就是1秒后所有数字同时显示出来。而上面的两种方法，要么通过递归控制每次的执行时机，要么用定时器逐次递增数字，就能完美实现每秒一个的打印效果啦。

内容的提问来源于stack exchange，提问作者Abishek Ganesh