时间戳

首页 > 解决方案 > 如何防止 PHP 睡眠功能停止我的 HTML 页面

javascript - 如何防止 PHP 睡眠功能停止我的 HTML 页面

问题描述

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

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>

PHP

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

这是我页面的链接，以查看我的页面到目前为止

标签： javascriptphphtml

解决方案

您的请求当前, false用于阻止请求。这将阻止动画和其他 JS 等在请求进行时在页面上运行。同步请求已被弃用，并可能导致糟糕的用户体验（如您所见） - 请改用适当的异步请求。

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

推荐阅读