Question

假设您有一个国际象棋类，该类具有make move函数，如下所示。在用户做出动作之后，我们立即让国际象棋引擎以自己的动作进行回复。一切正常，除了浏览器在调用第二个setState之前不会重绘，这意味着用户移动和引擎移动会在3秒钟的延迟后同时显示。这显然对用户不利，因为他们移动的棋子消失了，然后立即出现了两个棋子。我的问题是如何构造这些函数或类，以便浏览器在计算引擎移动之前可以呈现用户移动。谢谢。

class Chess extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chess_board: Array(64).set(null);
  }
}
//User makes a move
makemove_on_dragend(move) {
  const chess_board = this.state.chess_board;
  if (move is legal) {
    let new_board = chess_board.make_move(move);
    this.setState({chess_board: new_board})
  }
  this.chess_engine_move();
}
// Chess engine makes a move
chess_engine_move() {
    const chess_board = this.state.chess_board;
    let search_time = 3 seconds;
    let move = alphabeta(search_time, chess_board);
    let new_board = chess_board.make_move(move);
    this.setState({chess_board: new_board});
}

Answer 1

首先，setState是一个异步函数，因此您无法确定第一个setState何时运行。因此，我建议强制其同步运行。

this.setState({chess_board: new_board},()=> {console.log(this.state.chess_board)})

第二，使用setTimeout来模拟延迟

setTimeout(this.chess_engine_move(),3000);// delay 3s

在相同功能中两次反应SetState

1 个答案: