如何在循环迭代中实时更新DOM？附遗传算法代码场景

作为JS新手，你遇到的问题其实是同步阻塞导致浏览器无法及时渲染DOM的典型场景。原来的while循环是同步执行的，会霸占JS主线程，浏览器根本没时间处理DOM更新，所有的DOM修改要等到循环结束才会一起显示；而你尝试的setInterval/setTimeout如果没处理好执行顺序，很容易出现逻辑和渲染不同步的情况。

下面给你两种可行的异步迭代方案，保证DOM更新能实时显示：

方案1：用async/await结合Promise（更直观） #

这种方式通过异步等待让浏览器有时间渲染DOM，每一轮迭代完成后再进行下一轮，不会出现重叠：

async function runEvolution() {
  // 评估当前种群，判断是否继续进化
  const shouldContinue = population.evaluate();

  if (!shouldContinue) {
    // 满足终止条件，结束进化
    processingHTML.text("Evolution finished! 🎉");
    return;
  }

  // 实时更新DOM元素
  totalGenerationsHTML.text(population.totalGenerations);
  bestPhraseHTML.text(population.bestPhrase);
  bestFitnessHTML.text(population.bestFitness.toFixed(2)); // 格式化显示更友好
  processingHTML.text(`Processing generation ${population.totalGenerations}...`);

  // 给浏览器留出渲染时间（可调整延迟，比如50ms）
  await new Promise(resolve => setTimeout(resolve, 50));

  // 执行繁殖流程
  population.buildMatePool();
  population.reproduce();
  population.clearMatePool();

  // 递归调用，进行下一轮迭代
  await runEvolution();
}

// 启动进化过程
runEvolution();

方案2：用requestAnimationFrame（更贴合浏览器渲染周期） #

requestAnimationFrame会在浏览器下一次重绘前执行回调，能完美匹配渲染节奏，避免不必要的延迟：

function runEvolution() {
  const shouldContinue = population.evaluate();

  if (!shouldContinue) {
    processingHTML.text("Evolution finished! 🎉");
    return;
  }

  // 更新DOM
  totalGenerationsHTML.text(population.totalGenerations);
  bestPhraseHTML.text(population.bestPhrase);
  bestFitnessHTML.text(population.bestFitness.toFixed(2));
  processingHTML.text(`Processing generation ${population.totalGenerations}...`);

  // 等浏览器完成当前渲染后，再执行下一轮繁殖
  requestAnimationFrame(() => {
    population.buildMatePool();
    population.reproduce();
    population.clearMatePool();
    runEvolution();
  });
}

// 启动进化
runEvolution();

为什么这两种方案能解决问题？ #

1. JS是单线程的，同步while循环会一直霸占主线程，浏览器无法处理渲染任务；
2. 异步方案通过await或requestAnimationFrame把繁殖逻辑推迟到浏览器完成渲染后再执行，保证DOM更新能及时显示；
3. 递归调用的方式确保每一轮进化完全完成后才开始下一轮，不会出现种群状态混乱的情况。

小提示 #

• 如果你觉得更新速度太快，可以调整setTimeout的延迟时间（比如改成100ms）；
• 可以给bestFitness加上格式化（比如toFixed(2)），让显示更美观；
• 注意你的evaluate方法返回值：当bestFitness >= minFitness时返回false，终止循环，这个逻辑是对的，不用修改。

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