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获得的数字。

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

如果没有完成初始计数......就让它完成！等待下一次inteval迭代。

然后......如果获得的数字与“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秒，以便在此片段中开始第一个间隔...
当你看到“请求显示没有变化。”时，只需稍等一下就可以让ressource增加。

修改
.toLocaleString()重新添加要显示的数字的昏迷。