Saya telah membuat skrip untuk menganimasikan angka dari nol hingga angka tertentu yang diperoleh dari file PHP. Tapi tidak bekerja.

Ini kode saya:

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>

Ini demonya (tidak berfungsi): https://jsfiddle.net/rwf707Lp/

0
Esteban Gorupicz 10 Agustus 2017, 16:18

2 jawaban

Jawaban Terbaik

EDIT
Saya mengubah beberapa hal dari jawaban pertama saya ...

Triknya, untuk menampilkan "penghitung prestasi" adalah dengan menghitung dari nol hingga angka yang diperoleh melalui ajax pada pemuatan halaman.

Kemudian interval untuk terus-menerus memeriksa pencapaian yang diperbarui harus memeriksa apakah animasi onload yang cukup lama telah selesai.

Jika belum selesai penghitungan awal... Biarkan saja selesai! Dan tunggu iterasi inteval berikutnya.

Lalu... Jika angka yang didapat berbeda dengan angka "sebelum ajax", hitung!

Kecepatan sekarang tergantung pada jumlah dari kecepatan sumber daya yang meningkat.

Saya pikir itu lebih dekat dengan apa yang Anda inginkan...
;)

(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>

Harus menunggu 3 detik agar interval pertama dimulai dalam cuplikan ini...
Ketika Anda akan melihat "Permintaan mengungkapkan tidak ada perubahan.", Tunggu sebentar hingga sumber daya bertambah.

EDIT
.toLocaleString() menambahkan kembali koma pada nomor yang akan ditampilkan.

1
Louys Patrice Bessette 11 Agustus 2017, 00:23

Tampaknya berfungsi dengan baik, Anda baru saja melewatkan mengimpor Jquery lib ,

Lihat cuplikan di bawah ini:

(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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="tasksCompleted"></span>
0
Spring 10 Agustus 2017, 13:28