如何在JavaScript循环的每次迭代中实时显示随机数结果？

问题背景 #

需要实现每次迭代生成三个随机数并显示在对应容器中，完成20次迭代后停止，但当前代码仅显示最终结果，无法看到中间过程。

原代码 #

JavaScript

function generateNumber() {
  /* console.count(); */
  count = 0;
  for (var i = 0; i <= 20; i++) {
    let n = document.getElementById("demo").innerHTML = Math.floor(Math.random() * 5);
    let n1 = document.getElementById("demo1").innerHTML = Math.floor(Math.random() * 5);
    let n2 = document.getElementById("demo2").innerHTML = Math.floor(Math.random() * 5);

    if (n === n1 && n1 === n2) {
      count++;
      let audio = new Audio(
        "media/008868268_prev.mp3"
      );
      audio.play();
    } else
    if (n === n1 || n1 === n2 || n === n2 || n2 === n1 || n1 === n) {
      count++;
    }
    document.getElementById("coinci").innerHTML = count;
  }
}

HTML

<div class="num">
  <div id="demo"></div>
  <div id="demo1"></div>
  <div id="demo2"></div>
  <div id="coinci"></div>
</div>

<div class="btn">
  <button type="button" onclick="generateNumber()">Generar</button>
</div>

问题原因 #

原代码使用for循环执行20次，JavaScript单线程特性导致循环在瞬间完成，浏览器来不及渲染每次迭代的DOM更新，最终只能看到最后一次的结果。

修改方案 #

使用setInterval控制每次迭代的间隔，给浏览器留足渲染时间，同时记录迭代次数，达到20次时停止定时器：

function generateNumber() {
  let count = 0;
  let iteration = 0;
  const maxIterations = 20;

  const intervalId = setInterval(() => {
    // 生成并更新随机数
    const n = Math.floor(Math.random() * 5);
    const n1 = Math.floor(Math.random() * 5);
    const n2 = Math.floor(Math.random() * 5);
    
    document.getElementById("demo").textContent = n;
    document.getElementById("demo1").textContent = n1;
    document.getElementById("demo2").textContent = n2;

    // 判断匹配情况并更新计数
    if (n === n1 && n1 === n2) {
      count++;
      const audio = new Audio("media/008868268_prev.mp3");
      audio.play();
    } else if (n === n1 || n1 === n2 || n === n2) {
      count++;
    }
    document.getElementById("coinci").textContent = count;

    // 达到迭代上限时停止定时器
    iteration++;
    if (iteration >= maxIterations) {
      clearInterval(intervalId);
    }
  }, 500); // 调整此值控制迭代速度，单位为毫秒
}

优化点说明 #

• 用let声明count和迭代变量，避免全局变量污染。
• 简化了重复的条件判断逻辑，保持效果一致。
• 使用textContent替代innerHTML，更安全高效（仅更新文本内容时优先使用）。

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