Javascript 如何防止PHP睡眠函数停止我的HTML页面_Javascript_Php_Html

Javascript 如何防止PHP睡眠函数停止我的HTML页面

javascript php html

Javascript 如何防止PHP睡眠函数停止我的HTML页面,javascript,php,html,Javascript,Php,Html,我目前正在尝试写一个骰子游戏。当用户单击“玩”时，骰子将开始变化。一个是用户的，一个是服务器的。当这种情况发生时，我的PHP页面将等待5秒钟，然后计算一个随机数。然后它会将它发送到HTML页面，一旦HTML收到它，它就会停止掷骰子并宣布获胜。我目前被困在PHP部分，并尝试使用sleep函数。然而，当我这样做时，如果我点击Play，骰子将不会移动，直到它收到数字，然后它将开始洗牌。这是到目前为止我的代码 HTML/JS <body> <h1>Brandon Wong

我目前正在尝试写一个骰子游戏。当用户单击“玩”时，骰子将开始变化。一个是用户的，一个是服务器的。当这种情况发生时，我的PHP页面将等待5秒钟，然后计算一个随机数。然后它会将它发送到HTML页面，一旦HTML收到它，它就会停止掷骰子并宣布获胜。我目前被困在PHP部分，并尝试使用sleep函数。然而，当我这样做时，如果我点击Play，骰子将不会移动，直到它收到数字，然后它将开始洗牌。这是到目前为止我的代码

HTML/JS

<body>
    <h1>Brandon Wong</h1>
    <input type="button" id="play" value="Play">
    <div id = "userDie"></div>
    <div id = "serverDie"></div>
    <script>
        document.querySelector('input[type]').addEventListener('click', toss_dice);

        //display default dice*/
        var userDie = document.createElement('img');
        var serverDie = document.createElement('img')
        userDie.src = '1.gif';
        serverDie.src = '1.gif';
        document.getElementById('userDie').appendChild(userDie);
        document.getElementById('serverDie').appendChild(serverDie);

        function toss_dice() {
            var dice = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif', '6.gif'];
            var randPlayer2 = 0;
            setInterval(function(){
                var randPlayer1 = Math.floor(Math.random() * dice.length);
                var randPlayer2 = Math.floor(Math.random() * dice.length);
                userDie.src = dice[randPlayer1];
                serverDie.src = dice[randPlayer2];
                document.getElementById('userDie').appendChild(userDie);
                document.getElementById('serverDie').appendChild(serverDie);
                //alert(randPlayer1);
            }, 500);

            request = new XMLHttpRequest();
            request.open('GET', 'hw02.php', false);
            request.send(null);

            var test = request.responseText;
            alert(test);
        }

    </script>


黄炯耀
document.querySelector（'input[type]'）。addEventListener（'click'，toss_dice'）；
//显示默认骰子*/
var userDie=document.createElement（'img'）；
var serverDie=document.createElement（'img'）
userDie.src='1.gif'；
serverDie.src='1.gif'；
document.getElementById（'userDie'）.appendChild（userDie）；
document.getElementById（'serverDie'）.appendChild（serverDie）；
函数toss_dice（）{
var dice=['1.gif'，'2.gif'，'3.gif'，'4.gif'，'5.gif'，'6.gif']；
var randPlayer2=0；
setInterval（函数（）{
var randPlayer1=Math.floor（Math.random（）*dice.length）；
var randPlayer2=Math.floor（Math.random（）*dice.length）；
userDie.src=dice[randPlayer1]；
serverDie.src=dice[randPlayer2]；
document.getElementById（'userDie'）.appendChild（userDie）；
document.getElementById（'serverDie'）.appendChild（serverDie）；
//警惕（randPlayer1）；
}, 500);
请求=新的XMLHttpRequest（）；
open（'GET'，'hw02.php'，false）；
请求发送（空）；
var test=request.responseText；
警报（测试）；
}

PHP

<?php 
    sleep(5); 
    $number = rand(0,5); 
    echo $number:
?>

这里有一个到我的页面的链接，以查看到目前为止我的页面

您的请求当前正在使用

，false

来阻止请求。这将阻止动画和其他JS等在请求进行时在页面上运行。不推荐使用同步请求，这可能会导致糟糕的用户体验（如您所见）——请改用适当的异步请求

request.addEventListener('readystatechange', () => {
  if (request.readyState === 4) {
    console.log(request.responseText);
  }
});
request.open('GET', 'hw02.php');