在 while 循环中更新 HTML 文本内容

Question

我遇到了一个看起来很简单的问题，但我仍然不知道如何解决。

所以，我的 HTML 文件中有这个标签：

<p id="best-individual-text" style="display: inline-block"></p>

对于上下文，我正在构建一个简单的遗传算法来进化一群个体（字符串）以达到目标短语。在我的 .js 文件中，我有一个循环来创建新种群并找到该种群中最好的个体，并且只有当其中一个个体与目标短语相同时，循环才会停止。

我要做的是用每一代中最好的个体的字符串来更新best-individual-text文本内容。由于 while 循环在每次迭代中都会创建一个新种群，因此每次迭代都会产生一个新的最佳个体。

在这个 while 循环中，我有以下代码行：

    document.getElementById("best-individual-text").textContent = getBestIndividual();

注意：getBestIndividual() 返回一个字符串

这就是我的问题：HTML 没有得到更新。标签保持空白，直到循环停止，然后才用最后一个最佳个体填充标签。

如果我手动尝试，也就是在 while 循环之外，它工作正常。我唯一的猜测是，while 循环运行得太快，无法更新 HTML。不过，我想我已经看到人们在 while 循环中更新 HTML，所以我真的不明白它现在工作的原因。

另外，我尝试使用 setInterval 而不是 while 循环，但它仍然不起作用。即使它确实有效，我也不会对每个循环设置任何类型的间隔。

问题可能是什么，如何解决？

提前谢谢你！

如果有人需要查看更多代码，请访问 github：https://github.com/pedroheck/genetic-algorithms/tree/main/Word%20Race

Answer 1

我尝试了您的代码，在我点击您输入一些文本的位置的情况下，单击“提交”，但没有任何反应，实际发生的是您的算法处于某种无限或长时间运行的循环中，并且它永远不会达到您尝试修改 HTML 的地步。

您可以通过在尝试修改 HTML 的行处设置断点来判断这一点，并注意它根本不会被命中。另一个线索是窗口变得没有响应。

我的建议是仔细研究您的算法并尝试设置一些限制。 console.log 语句将成为您的朋友，因为它们将帮助您查看代码的哪些部分运行得最多。