循环内更新用户界面

在下面的javascript中,显示了井字游戏:

src:

body {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    }


h2 {
    margin: 0 auto;
    font-size: 35px;
    margin: 10px;
}


.flex-container {
    /* In order to use flex-box we need to first set our display property */
    display: flex;
    /* center the container horizontally */
    justify-content: center;
    /* this will center content vertically */
    align-items: center;
    /* tells the container to align the children in columns rather than rows */
}

.flex-column {
    height: 100%;
    width: 100%;
    flex-direction: column;
    /* tells the container to drop down once it reaches max-width */
}

.flex-wrap {
    flex-wrap: wrap;
    height: 432px;
    width: 432px;
}


.square {
    border: 2px solid rgba(0, 0, 0, .75);
    height: 140px;
    width: 140px;
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}


#reset-button {
    text-align: center;
    font-size: 20px;
    border: 1px solid black;
    height: 55px;
    width: 100px;
    margin: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- this is how we link up the css -->
    <link href="style.css" rel="stylesheet" type="text/css">
    <!-- And this is how we link up the JS! -->
    <script defer src="main.js"></script>
    <!-- A fun title -->
    <title>Empowering Tic Tac Toe for the Good of Humanity</title>
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <h2>It's X's turn!</h2>
    <!-- Many websites are just divs on divs on divs. -->
    <div class="flex-container flex-column">
        <div class="flex-container flex-wrap" id="board">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        </div>
        <!-- I added a little reset button because our users are going to want to play round after round of our glorious game without ever refreshing the browser! -->
        <button id="reset-button">reset</button>
    </div>
</body>
</html>

/*----- constants -----*/
const winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
    ];

/*----- app's state (variables) -----*/

let board;
let turn = 'X';
let win;

/*----- cached element references -----*/

const squares = Array.from(document.querySelectorAll('#board div'));

/*----- event listeners -----*/
document.getElementById('board').addEventListener('click', handleTurn);
const messages = document.querySelector('h2');
document.getElementById('reset-button').addEventListener('click', init);


/*----- functions -----*/

function getWinner() {
    let winner = null;
    winningCombos.forEach(function(combo, index) {
        if (board[combo[0]] && board[combo[0]] === board[combo[1]] && board[combo[0]] === board[combo[2]]) winner = board[combo[0]];
        });
        return winner ? winner : board.includes('') ? null : 'T';
};

function getPosition(playerName) {

    const userAction = async () => {
      const response = await fetch('/', {
        method: 'GET',
        body: '/data/3', // string or object
        headers: {
          'Content-Type': 'application/json'
        }
      });
    const myJson = await response.json(); //extract JSON from the http response
    conole.log('myJson' , myJson)
        // do something with myJson
}

    var client = new HttpClient();
    client.get('/data/3', function(response) {
       console.log('response is'+response)
    });

    console.log('Getting position for player'+playerName)
}

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() {
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open( "GET", aUrl, true );
        anHttpRequest.send( null );
    }
}

function handleTurn() {
    let idx = squares.findIndex(function(square) {
        return square === event.target;
    });
    console.log('Turn is '+turn)

    if(turn == 'X') {
        getPosition('X')
        board[idx] = turn;
        turn = turn === 'X' ? 'O' : 'X';
    }
    else {
        getPosition('O')
        board[idx] = turn;
        turn = turn === 'X' ? 'O' : 'X';
    }
    win = getWinner();
    render();
};

function init() {
    board = [
    '', '', '',
    '', '', '',
    '', '', ''
    ];
    render();
};

function render() {
    board.forEach(function(mark, index) {
    //this moves the value of the board item into the squares[idx]
    squares[index].textContent = mark;
    });
    messages.textContent = win === 'T' ? `That's a tie, queen!` : win ? `${win} wins the game!` : `It's ${turn}'s turn!`;
    };



function wait(ms)
{
    var d = new Date();
    var d2 = null;
    do { d2 = new Date(); }
    while(d2-d < ms);
}

init();

我正在尝试将“ X”发送到所有间隔1秒的位置:

turn = 'X'
for (i = 0; i <= 8; i++) {
        board[i] = 'X';
        turn = turn === 'X' ? 'O' : 'X';
        console.log(board)
        render();
        wait(1000)
}

“ X”被发送到所有位置:

enter image description here

但是发送每个位置间隔1秒的间隔不起作用,而是UI一直保持到循环结束,然后更新了电路板。

如何更新代码,以便在循环中发送每个位置时每秒更新一次木板?

fiddle: https://jsfiddle.net/adrianfiddleuser/zmoy3shd/8/