如何修改JavaScript代码实现每隔1秒逐个输出10个数字

云上老周

2026-8-21

问题：如何用JavaScript每隔1秒逐个输出10个数字？

原代码运行时所有内容会在1秒后一次性显示，无法实现每隔1秒逐个输出的效果，以下是问题分析和修改方案：

原代码

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>How to use For Loop in JavaScript</h2>
  <p>Output 10 numbers using for loop in Javascript.</p>
  <p id="demo"></p>
</body>
</html>

JavaScript

let z = "";
for (y = 0; y < 11; y = y + 1){
  x = y + 10;
  z = z + " Number " + x + " is printed. <br>";
}

setInterval(function() {
  document.getElementById("demo").innerHTML = z
}, 1000)

问题根源

原代码先通过for循环一次性生成全部内容存入变量z，随后用setInterval每隔1秒将z的完整内容插入页面——本质是1秒后一次性展示所有内容，后续定时器重复执行也不会改变输出结果。

解决方案

要实现逐个间隔输出，需控制每次仅输出一个数字，并为每个数字设置递增的延迟时间，以下是两种可行方案：

方案1：`setTimeout`结合循环

利用setTimeout的延迟特性，为每个数字设置依次递增的延迟（第n个数字延迟n*1000毫秒）：

const demo = document.getElementById("demo");
// 循环生成10个数字（10到19）
for (let i = 0; i < 10; i++) {
  const num = i + 10;
  // 每个数字的输出延迟依次增加1秒
  setTimeout(() => {
    demo.innerHTML += ` Number ${num} is printed. <br>`;
  }, i * 1000);
}

方案2：`setInterval`控制计数

通过计数器变量追踪输出次数，每次定时器触发时输出当前数字，完成10次后清除定时器：

const demo = document.getElementById("demo");
let count = 0;
const timer = setInterval(() => {
  if (count >= 10) {
    // 完成输出后停止定时器
    clearInterval(timer);
    return;
  }
  const num = count + 10;
  demo.innerHTML += ` Number ${num} is printed. <br>`;
  count++;
}, 1000);