Javascript JQuery-livephp重新加载_Javascript_Php_Jquery_Html

Javascript JQuery-livephp重新加载

javascript php jquery html

Javascript JQuery-livephp重新加载,javascript,php,jquery,html,Javascript,Php,Jquery,Html,最近我在JQuery和PHP方面遇到了一些问题。我一直在创建一个有按钮的网页，并且有很多次这个按钮被任何人按下。目前，我正在使用JQuery和PHP使按键计数每秒更新4次以下是代码简介： index.php： <!DOCTYPE html> <html> <head> <title>The Button</title> <audio id="click"> /* Big thanks to frees

最近我在JQuery和PHP方面遇到了一些问题。我一直在创建一个有按钮的网页，并且有很多次这个按钮被任何人按下。目前，我正在使用JQuery和PHP使按键计数每秒更新4次

以下是代码简介：

index.php：

<!DOCTYPE html>
<html>

<head>
  <title>The Button</title>
  <audio id="click">
      /* Big thanks to freesound.org and user "brnck" for the button click sound!
      You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
      <source src="button-click.wav">
  </audio>
</head>
<style>
    #background1 {
        image-rendering:-webkit-optimize-contrast;
        position: absolute;
        top: 65%;
        left: 50%;
        margin-top: -167.5px;
        margin-left: -145px;
        z-index: -1;
    }
    #button {
        image-rendering:-webkit-optimize-contrast;
        position: absolute;
        top: 65%;
        left: 50%;
        margin-top: -167.5px;
        margin-left: -145px;
        z-index: 0;
    }
    /* This CSS class of #button is for the button press animation */
    #button.press {
        -webkit-animation-name: pressAnim; /* Webkit Syntax */
        -webkit-animation-duration: 1s;
        animation-name: pressAnim; /* Standard Syntax */
        animation-duration: .75s;
    }
    #background2 {
        image-rendering:-webkit-optimize-contrast;
        position: absolute;
        top: 65%;
        left: 50%;
        margin-top: -167.5px;
        margin-left: -145px;
        z-index: 1;
    }
    #number {
        text-align: center;
        font-style: "Arial Black";
        font-size: 100px;
    }
    /* Webkit Animation */
    @-webkit-keyframes pressAnim {
        0%   {left:50%; top:65%;}
        50%  {left:50%; top: calc(65% + 18px);}
        100% {left:50%; top:65%;}
    }
    /* Standard Animation */
    @keyframes pressAnim {
        0%   {left:50%; top:65%;}
        50%  {left:50%; top: calc(65% + 18px);}
        100% {left:50%; top:65%;}
    }
</style>
<body>

    <div id="background1">
        <img src="ButtonTop.png" width="290" height="372">
    </div>

    <div id="button">
        <img src="Button.png" width="290" height="372">
    </div>

    <div id="background2">
        <img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
    </div>

    <div id="number">
        <?php
            include('reload.php');
        ?>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">

        $(document).ready(function(){
            /* This function is for refreshing the total clicks number to make it live */
            setInterval(function reload() {

                console.log('Reloaded Clicks')
                $('#number').load('reload.php');

            }, 250);

        });

    </script>
    <script>

    /* This function is for the button animation, button sound, & button press delay */
        var button = document.getElementById('button');
        function press() {
            if(button.className == "") {
                button.className = "press";
                document.getElementById('click').play();
                /* send click event to server */
                button.addEventListener("webkitAnimationEnd", removeListener);
            }

        };

        function removeListener(event) {
            button.removeEventListener("webkitAnimationEnd", removeListener);
            button.className = "";
        }
    </script>

</body>

reload.php：

<?php
$my_file = 'clicks.txt';
$handle = fopen($my_file, 'r');
$value = fread($handle,filesize($my_file));
echo $value;
?>

在JQuery部分中，控制台有一个日志，但是当我访问网站时，日志中没有显示任何内容，因此我假设JQuery部分由于某种原因被完全跳过。虽然控制台中没有错误，但这使问题更难识别

如果您想查看该网站，请看下面的示例，但正常运行时间并不十分理想，因此如果无法访问该网站，请不要惊慌。

您的代码不起作用，因为您在加载jQuery库的脚本中定义了部分逻辑。脚本标记的内容将被丢弃，并替换为列为src属性的URL的内容

因此，您需要将$document.ready移动到第二个块。在执行时，为了安全起见，您的所有代码都应该在ready块中定义，因为否则您无法真正精确地控制它的执行时间

最后，正如Ken Franqueiro和Kaleb Klein指出的那样，每250毫秒刷新一次数据都会导致服务器死机。

对于任何有相同问题的人，以下是我提出的解决方案，感谢Guillaume Bodi、Ken Franqueiro和Kaleb Klein：

<!DOCTYPE html>
<html>

<head>
  <title>The Button</title>
  <audio id="click">
      /* Big thanks to freesound.org and user "brnck" for the button click sound!
      You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
      <source src="button-click.wav">
  </audio>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<style>
    #background1 {
        image-rendering:-webkit-optimize-contrast;
        position: absolute;
        top: 65%;
        left: 50%;
        margin-top: -167.5px;
        margin-left: -145px;
        z-index: -1;
    }
    #button {
        image-rendering:-webkit-optimize-contrast;
        position: absolute;
        top: 65%;
        left: 50%;
        margin-top: -167.5px;
        margin-left: -145px;
        z-index: 0;
    }
    /* This CSS class of #button is for the button press animation */
    #button.press {
        -webkit-animation-name: pressAnim; /* Webkit Syntax */
        -webkit-animation-duration: 1s;
        animation-name: pressAnim; /* Standard Syntax */
        animation-duration: .75s;
    }
    #background2 {
        image-rendering:-webkit-optimize-contrast;
        position: absolute;
        top: 65%;
        left: 50%;
        margin-top: -167.5px;
        margin-left: -145px;
        z-index: 1;
    }
    #number {
        text-align: center;
        font-style: "Arial Black";
        font-size: 100px;
    }
    /* Webkit Animation */
    @-webkit-keyframes pressAnim {
        0%   {left:50%; top:65%;}
        50%  {left:50%; top: calc(65% + 18px);}
        100% {left:50%; top:65%;}
    }
    /* Standard Animation */
    @keyframes pressAnim {
        0%   {left:50%; top:65%;}
        50%  {left:50%; top: calc(65% + 18px);}
        100% {left:50%; top:65%;}
    }
</style>
<body>

    <div id="background1">
        <img src="ButtonTop.png" width="290" height="372">
    </div>

    <div id="button">
        <img src="Button.png" width="290" height="372">
    </div>

    <div id="background2">
        <img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
    </div>

    <div id="number">
        <?php
            include('reload.php');
        ?>
    </div>
    <script>

        $(document).ready(setInterval(function(){

            console.log('Reloaded Clicks')
            $('#number').load('reload.php');

        }, 2000));

    /* This function is for the button animation, button sound, & button press delay */
        var button = document.getElementById('button');
        function press() {
            if(button.className == "") {
                button.className = "press";
                document.getElementById('click').play();
                /* send click event to server */
                button.addEventListener("webkitAnimationEnd", removeListener);
            }

        };

        function removeListener(event) {
            button.removeEventListener("webkitAnimationEnd", removeListener);
            button.className = "";
        }
    </script>

</body>

总结一下，我去掉了不必要的额外函数，并将脚本源代码放在了头上。另外，我将重新加载速度减慢到每两秒一次

下面是一些计划和其他不重要的东西。如果需要，我会放慢速度，但这会产生问题。如果我让一个客户点击按钮，并且计数在几秒钟内没有变化，我们得到的就是所谓的滞后。我计划通过客户方面的假设来解决这个问题

通过假设，我的意思是让客户机通知服务器他们单击了按钮，然后让客户机将一个添加到他们的计数中。然后，几秒钟后，服务器将响应新的总点击次数，其中包括来自其他客户端的点击次数。新号码会在客户端更新，一切都会好起来

希望这一切都是有道理的，但真的不需要。这其实并不重要，只是我自己的一些计划和理论。

如果你试图让每一个访问它的浏览器每秒4次基本上都与服务器保持联系，那么正常运行时间就更不重要了。您实际上正在实施自我DDOS。至少，设置一个更长的超时，并使用setTimeout并在加载函数的完整回调中安排另一个setTimeout，以消除在较早的请求完成之前发送更多请求的风险。对于像计数器行这样简单的事情，5秒的间隔就足够了。如上所述，4次/秒不是一个好主意。谢谢！看起来我已经让它工作了，但是现在我想知道是否有任何方法可以让我包围$'number'。加载'reload.php'；使用某种try/catch检查并确保服务器仍然可以访问。