Question

我正在写一个游戏，让2个玩家轮流玩。玩家采取可行的行动后，空白元素覆盖了整个屏幕，然后出现提示，询问他们是否应该进行下一个回合。在提示上单击“确定”后，空白元素将被删除以显示游戏。

但是，提示将在可行的移动之后立即出现，而不是在样式更改之后出现。因此，如果用户单击“确定”，则空白封面将永远不会出现在屏幕上。进行样式更改的唯一方法是用户在提示上单击“取消”。

是否有某种方法可以使提示在样式更改后发生？

仅是示例代码

var nextTurn;
cover.style.visibility='hidden';
function displaySwitch(){
     if(turn == 0){
          cover.style.visibility='visible';
          nextTurn = confirm("Click OK for next turn");
          if(nextTurn == true){
               cover.style.visibility='hidden';
               turn++;
          }
     }else if(turn == 1){
          cover.style.visibility='visible';
          nextTurn = confirm("Click OK for next turn");
          if(nextTurn == true){
               cover.style.visibility='hidden';
               turn--;
          }
     }
}

Answer 1

您可以考虑使用setTimeout(() => { ... })。这使浏览器可以在继续执行代码之前做一些事情（例如渲染）。请注意，如果在调用setTimeout之后有代码，则可能会遇到问题，因此可能必须更改很多代码。（例如，see MDN's docs for setTimeout。）

let nextTurn;
cover.style.visibility = 'hidden';
function displaySwitch() {
     if(turn == 0) {
          cover.style.visibility = 'visible';
          setTimeout(() => {
              nextTurn = prompt("Click OK for next turn");
              if(nextTurn == true) {
                   cover.style.visibility = 'hidden';
                   turn++;
              }
          });
     } else if(turn == 1) {
          setTimeout(() => {
              nextTurn = prompt("Click OK for next turn");
              if(nextTurn == true) {
                   cover.style.visibility = 'hidden';
                   turn--;
              }
          });
     }
}
...
setTimeout(displaySwitch, 0);

注意：如果您需要支持较旧的浏览器并且不需要进行任何预处理，请用() => { ... }替换function() { ... }，并用let替换var。

Answer 2

使用setTimeout至少50ms。
而且，最好使用确认而不是提示，因为提示会返回一个输入值。

 if (turn == 0) {
      cover.style.visibility = 'visible';
      setTimeout(function() {
        nextTurn = confirm("Click OK for next turn");
        if (nextTurn == true) {
          cover.style.visibility = 'hidden';
          turn++;
        }
      }, 50);
    } else if (turn == 1) {
      cover.style.visibility = 'visible'
      setTimeout(function() {
        nextTurn = confirm("Click OK for next turn");
        if (nextTurn == true) {
          cover.style.visibility = 'hidden';
          turn--;
        }
      }, 50);
    }

如何在提示之前进行样式更改

2 个答案: