[カウントアップ]３秒以内にカウントアップを終了させたい

Question

実現したいこと

0からカウントスタートさせて、目標数まで３秒でカウントアップを完了させたいです。

発生している問題・エラーメッセージ

3秒でカウントアップアニメーションが完了しない。
どなたかご助言していただけると助かります、、！
よろしくお願いいたします。

該当のソースコード

<p class="count_description">総売上<span class="count" id="count02" data-num="6000">0</span>万</p>

var success = true;
  $(window).scroll(function() {
    if(success){
    var elm = $('.count');

    var elmTop = elm.offset().top;
    var scr_count = $(window).scrollTop() + (window.innerHeight/2);

    if (scr_count > elmTop) {
      success = false;
      elm.each(function(){
          var self = $(this),
          countMax = self.attr('data-num'),
          thisCount = self.text(),
          countTimer;

          function timer(){
              var countSpeed = 3000/new Number(countMax - thisCount);
              countTimer = setInterval(function(){
                  var countNext = thisCount++;
                  self.text(countNext);

                  if(countNext == countMax){
                      clearInterval(countTimer);
                  }
              },countSpeed);
          }
          timer();
      });
    }
    }
  });

###解決法
https://github.com/bfintal/Counter-Up
上記のプラグインを導入したところ、下記のコードだけで動作しました。

jQuery(document).ready(function($) {
       $('.count').counterUp({
           delay:  25,
           time: 1000
       });
   });

Comments

[m.ts10806]

一部インデントが合っていないので調整してください。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[yuyauver98]

かしこまりました！ご指摘ありがとうございます！！

Answer 1

ループ内の処理が0.5ミリ秒内に終わらないので処理が待たれているのでしょう
割り込み間隔を伸ばし、刻み値をあげて対応してください

6000を0.5ミリ秒間隔でカウントアップするのではなく
100ミリ秒間隔くらいで調整するとよいでしょう

sample

$(function(){
  var timerID;
  var self=$('#count02');
  $("#button").on('click',function() {
    clearInterval(timerID);
    var countNext=0;
    var countMax=6000;
    var countSpeed=100;
    var endTime=3000;
    var countInterval=countMax*countSpeed/endTime;
    timerID=setInterval(function(){
      countNext += countInterval;
      self.text(countNext+parseInt(Math.random()*countInterval));
      if(countNext >= countMax){
        self.text(countMax);
        clearInterval(timerID);
      }
    },countSpeed);
  });
});

<input type="button" id="button" value="start">
<span class="count" id="count02">0</span>万</p>

Comments

[yuyauver98]

回答ありがとうございます！！sampleまで用意していただきありがとうございます。

Answer 2

jQuery(document).ready(function($) {
       $('.count').counterUp({
           delay:  25,
           time: 1000
       });
   });

https://github.com/bfintal/Counter-Up
上記のプラグインを導入したところ、下記のコードだけで動作しました。