在不刷新页面或停止功能的情况下刷新表格

Question

I'm working on a basic genetic algorithm that guesses the words you type into it. I have all of that working but for some reason, the guesses are not live updating, but rather only using the last iteration. Here's my current updateGuesses function:

function updateGuesses(){
var sortAtt = attempts.sort(cmpFitness);
bestAttempt = sortAtt[0];
GUESS.innerHTML= bestAttempt.sentence;

//Top Guesses from past generations
pastGuesses[5] = pastGuesses[4];
pastGuesses[4] = pastGuesses[3];
pastGuesses[3] = pastGuesses[2];
pastGuesses[2] = pastGuesses[1];
pastGuesses[1] = pastGuesses[0];
pastGuesses[0] = {sentence:bestAttempt.sentence, gen:generation};

document.getElementById("gen1").innerHTML = pastGuesses[0].gen;
document.getElementById("guess1").innerHTML = pastGuesses[0].sentence;
document.getElementById("gen2").innerHTML = pastGuesses[1].gen;
document.getElementById("guess2").innerHTML = pastGuesses[1].sentence;
document.getElementById("gen3").innerHTML = pastGuesses[2].gen;
document.getElementById("guess3").innerHTML = pastGuesses[2].sentence;
document.getElementById("gen4").innerHTML = pastGuesses[3].gen;
document.getElementById("guess4").innerHTML = pastGuesses[3].sentence;
document.getElementById("gen5").innerHTML = pastGuesses[4].gen;
document.getElementById("guess5").innerHTML = pastGuesses[4].sentence;
document.getElementById("gen6").innerHTML = pastGuesses[5].gen;
document.getElementById("guess6").innerHTML = pastGuesses[5].sentence;
}

This function is called in a while loop that updates the array every iteration. The end result that's displaying is correct but for some reason it's not updating each loop. Here's the table structure:

<table id="myTable">
        <tr>
            <td>Generation</td>
            <td>Best Guess</td>
        </tr>
        <tr>
            <td><span id="gen1">1</span></td>
            <td id="guess1">N/A</td>
        </tr>
        <tr>
            <td id="gen2">2</td>
            <td id="guess2">N/A</td>
        </tr>
        <tr>
            <td id="gen3">3</td>
            <td id="guess3">N/A</td>
        </tr>
        <tr>
            <td id="gen4">4</td>
            <td id="guess4">N/A</td>
        </tr>
        <tr>
            <td id="gen5">5</td>
            <td id="guess5">N/A</td>
        </tr>
        <tr>
            <td id="gen6">6</td>
            <td id="guess6">N/A</td>
        </tr>
    </table>

EDIT: Here's my main method that includes the loops:

function main(){
var string;
var score;
generation = 0;
goal = document.getElementById("goalField").value;
string_length = goal.length

//Populate attempts with random strings
for (let i = 0; i < POPULATION; i++){
    string = randomString();
    score = stringScore(string);
    attempts[i] = {sentence:string, sentenceScore:score};
}
//Retrieve Probabilities for each attempt
fitness()

//Find best Guess
updateGuesses()

while(bestAttempt.sentenceScore != string_length){
    repopulate()
    generation++;

    sortAtt = attempts.sort(cmpFitness)

    updateGuesses()
}

The while loop basically checks if the best sentence guessed is correct and if it isn't it creates a new array of guesses. The goal is to update the HTML table with the new guesses each time it runs through the while loops.

Answer 1

Thank you @RobbieD ! I figured it out by using setInterval with an if statement within it instead of a while loop.

var repeat = setInterval(doAgain,100);

}
function doAgain(){
//GUESS.innerHTML=attempts[0].fitness

if(bestAttempt.sentenceScore != string_length){
repopulate()
generation++;

sortAtt = attempts.sort(cmpFitness)

updateGuesses()

}
else{
clearInterval(repeat);
}
}