HTML AJAX 实时更新 PHP 变量，使用 ajax 进行计数动画

Question

我正在尝试制作每秒更新一次的实时变量，但当我在那里添加计数函数时，我可以看到 0 1 秒，之后该变量显示没有动画。我的目标是使变量在第一次加载页面时从 0 计数到“var.value”，例如18，如果变量更改为例如20，那么将会有 count ani。从18到20。我实际上不知道如何实现它，因为我无法获取先前的变量，因为它存储在global_users.php中

索引.php

<script>

$(document).ready(function() {

    $("#players").load("global_users.php")

    setInterval(function () {

        $("#players").load("global_users.php")

    }, 1000);

});

</script>

<span class="Count" id="players"></span>

<script>

    $('.Count').each(function () {

        $(this).prop('Counter',0).animate({

            Counter: $(this).text()

        }, {

            duration: 1000,

            easing: 'swing',

            step: function (now) {

                $(this).text(Math.ceil(now));

            }

        });

    });

</script>

全局用户.php

<?php

include("php/server.php");

echo $total_online = $serverInfo['Players'];

?>

Answer 1

问题在于.load()方法的使用，该方法可能有用，但不适用于本例。.load()在其内部，$.ajax()您可以使用 jQuery 向服务器发出请求。使用它来访问服务器随每个请求返回的玩家计数值。将代码分为两个函数，一个用于获取玩家计数，另一个用于使用动画更新玩家计数。每当第一个函数下载了新的计数并且该计数与您已有的计数不同时，请调用第二个函数进行更新和动画处理。<span class="count" id="players"></span>$(document).ready(function() {  // Set starting count.  let count = 0;  const $players = $('#players');  /**   * Updates the player count with an animation and   * saves the new player count.   */  function updatePlayerCount(newCount) {    $({       counter: count // Starting value, which is the last known count value.    }).animate({       counter: newCount // Value to animate to, which is the new count value.    }, {      duration: 1000,      easing: 'swing',      step: function() {        $players.text(Math.ceil(this.counter));      },      complete: function() {        count = newCount; // Update the count value after the animation to compare it later again.      }    });  }  /**   * Gets the count value from the server and    * passes it to the updatePlayerCount function   * if the count has been changed.   */  function getPlayerCount() {    $.ajax({      url: 'global_users.php',      method: 'GET'    }).done(function(newCount) {      newCount = Number(newCount); // Makes sure that the value is a number.      if (count !== newCount) {         updatePlayerCount(newCount); // newCount is a different value than count, so updatePlayerCount is called.      }    });  }  // Execute getPlayerCount every 5 seconds.  setInterval(getPlayerCount, 5000);});