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

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

使用至少 50 毫秒的 setTimeout。
而且你最好使用 confirm 而不是 prompt 因为 prompt returns 是一个输入值。

 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);
    }

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

How to make style change happen before prompt

javascript

prompt