javascript - Javascript代码在设定的时间内冻结屏幕

Question

我正在尝试使用以下代码

1. 显示纸牌游戏的结果，
2. 等待 3 秒，同时显示倒计时，然后，

3. 重新加载屏幕。

   //Display results, at least that was the idea.
   for(var player = 0; player < players.length; player++)
   {
       resultString = players[player][6]
       if (result == null) { resultString += ", its a tie."; }
       else
       {
           resultString += (player == 0 ? ", you" : ", cassino") +
           (player == result ? (player == 0 ? " win" : " wins") :
           (player == 0 ? " lose" : " loses"));
       document.getElementById(player == 0 ? "player" : "casino").
       childNodes[0].nodeValue = resultString;
       }
       showHand(players[player]);
   }
   
   //Lag for 3 seconds while displaying a countdown. At least it lags alright.
   var time = new Date().getTime();
   while (((time / 1000) + 3) - (new Date().getTime() / 1000 ) > 0)
   {
       document.getElementById("call").childNodes[0].nodeValue = "Next round in "
       + Math.ceil(((time / 1000) + 3) - (new Date().getTime() / 1000 ))
       .toFixed(0);
   }
   //Reload screen. Working fine.
   dealHands();
   }
   

问题在于，通过运行此代码，屏幕会在加载重新加载屏幕之前冻结3 秒，即使 console.log 指出在程序的“//显示结果”部分中显示的值没有问题。事实上，如果我在评论“//Lag for 3 seconds...”之后评论该部分，结果将按预期显示。.time() 是否有一些我不知道的属性覆盖了代码？

Answer 1

如果您想在 3 秒后显示倒计时，您可以将代码重新加载到一个函数中并调用该函数，使用window.setTimeout该函数不会冻结窗口，并且在您指定的时间后调用该函数。

对于倒计时显示，您可以使用window.setInterval.