javascript - jQuery 动画数字计数器从零到 PHP 函数中返回的某个数字

Question

我创建了一个脚本，用于将从 PHP 文件获取的数字从零动画化到特定数字。但不起作用。

这是我的代码:

JQUERY

(function($){
var auto_refresh = setInterval(
    function (){
        $("#tasksCompleted").load("https://workhub.atexto.com/main/tasksCompleted.php").fadeIn("slow");
    },
    3000); // refresh every 1000 milliseconds

  jQuery({ Counter: 200000 }).animate({ Counter: $("#tasksCompleted").text() }, {
    duration: 8000,
    easing: "swing",
    step: function () {
        $("#tasksCompleted").text(Math.ceil(this.Counter));
    }
});
})(jQuery);

HTML

<span id="tasksCompleted"></span>

这是演示(不工作): https://jsfiddle.net/rwf707Lp/

Answer 1

编辑
我从第一个答案中改变了一些事情......

显示“成就计数器”的技巧是从零计数到页面加载时通过 ajax 获得的数字。

然后，不断检查更新成就的时间间隔必须检查相当长的加载动画是否已经完成。

如果没有完成初始计数...就让它完成吧!并等待下一次间隔迭代。

然后...如果获取到的数字与“ajax之前”的数字不同，则计数!

速度现在取决于资源速度增加的数量。

我认为这更接近你的愿望......
;)

(function($){
  console.clear();
  var number_beforeAjax;
  var number_afterAjax;

  var auto_refresh = setInterval(
    function (){
      number_beforeAjax = parseInt( $("#tasksCompleted").text().replace(",","") );
      console.log("number_beforeAjax: "+number_beforeAjax);
    
      $.ajax({
        dataType: "jsonp",
        url: "https://www.bessetteweb.com/SO/45614889/ressource.php",
        success: function(data){
          $("#numberFromAjax").html(data);
          counter();
        }
      });   //$("#numberFromAjax").getJSON("https://www.bessetteweb.com/SO/45614889/ressource.php",counter());
    },
    3000); // refresh every 3000 milliseconds

  // A separate function to call as a load callback
  function counter(){

    // Just to see what was loaded via ajax.
    var loaded = $("#numberFromAjax").text();
    console.log("loaded: "+loaded);

    // Number loaded via ajax parsed as integer.
    number_afterAjax = parseInt( $("#numberFromAjax").text().replace(",","") );
    console.log("number_afterAjax: "+number_afterAjax);

    // If the numbers before and after ajax are different
    if(number_beforeAjax != number_afterAjax && !isNaN(number_afterAjax) ) {
      
      counterSpeed = 5000;
      // Faster if the difference isn't much
      if(number_afterAjax-number_beforeAjax<20){
        counterSpeed = 2900;
      }
      // Set the start number to zero on 1st iteration
      var startNumber;
      if(isNaN(number_beforeAjax)){
        startNumber = 0;
      }else{
        startNumber = number_beforeAjax;
      }

      // Counter!
      jQuery({ Counter: startNumber }).animate({ Counter: number_afterAjax }, {
        duration: counterSpeed,
        easing: "swing",
        step: function () {
          $("#tasksCompleted").text(Math.ceil(this.Counter).toLocaleString());
        }
      });
    }

    // Just a console.log
    if(number_beforeAjax == number_afterAjax && !isNaN(number_afterAjax)){
      console.log("Request revealed no change.")
    }
  }
})(jQuery);

#numberFromAjax{
   display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="tasksCompleted"></span><br>
<span id="numberFromAjax"></span>

必须等待 3 秒才能在此片段中开始第一个间隔...
当您看到“请求显示没有更改。”时，只需稍等一下资源即可增加。

编辑
.toLocaleString() 在要显示的数字上重新添加逗号。