Tengo un problema que parece muy simple, pero aún no sé cómo resolverlo.
Entonces, tengo esta etiqueta en mi archivo HTML:
<p id="best-individual-text" style="display: inline-block"></p>
Por contexto, estoy construyendo un algoritmo genético simple para evolucionar una población de individuos (cadenas) para alcanzar una frase objetivo. En mi archivo .js, tengo un ciclo que crea la nueva población y encuentra el mejor individuo de esa población, y el ciclo solo se detiene cuando uno de los individuos es idéntico a la frase objetivo.
Lo que quiero hacer es actualizar el contenido de texto del mejor individuo con la cadena del mejor individuo de cada generación. Dado que el ciclo while crea una nueva población en cada iteración, habrá un nuevo mejor individuo en cada iteración.
Dentro de este ciclo while, tengo la siguiente línea de código:
document.getElementById("best-individual-text").textContent = getBestIndividual();Nota: getBestIndividual() devuelve una cadena
Y aquí radica mi problema: el HTML no se actualiza. La etiqueta permanece en blanco hasta que el ciclo se detiene, y solo después de eso, la etiqueta se llena con el último mejor individuo.
Funciona bien si intento esto manualmente, es decir, fuera del ciclo while. Mi única suposición es que el ciclo while se ejecuta demasiado rápido para que se actualice el HTML. Aún así, creo que he visto a personas actualizar el HTML en un ciclo de tiempo, por lo que realmente no entiendo la razón por la que ahora está funcionando.
Además, he intentado hacer un setInterval en lugar de un bucle while, pero sigue sin funcionar. Incluso si funcionó, no me interesa tener ningún tipo de intervalo para cada bucle.
¿Cuál podría ser el problema y cómo se puede solucionar?
¡Gracias de antemano!
Aquí está el github en caso de que alguien necesite ver más del código: https://github.com/pedroheck/genetic-algorithms/tree/main/Word%20Race
Probé su código, y en los casos en que presiono donde ingresa un texto, hago clic en "Enviar", y no sucede nada, lo que realmente sucede es que su algoritmo está en una especie de bucle infinito o de ejecución prolongada, y nunca llega al punto en el que intenta modificar el HTML.
Puede decir esto simplemente estableciendo un punto de interrupción en la línea que intenta modificar el HTML y observe que simplemente no se golpea. Otra pista es que la ventana deja de responder.
Mi recomendación sería mirar más de cerca su algoritmo e intentar establecer algunos límites. Las declaraciones de console.log serán tus amigas, porque te ayudarán a ver qué partes del código se ejecutan más.