数字增加Jquery动画有时停在随机数。

时间:2017-07-23 05:07:42

标签: javascript jquery html

MyRateCard ratecard = new Gson().fromJson(response.toString(), MyRateCard.class);
const ratingcount = document.querySelectorAll('.ratingcount');
const totalratingcounter = ratingcount.length;

var stopNow = totalratingcounter

countEach()
$(window).on('scroll', function(e) {
      countEach()
})

function countEach() {
    $('.ratingcount').each(function() {
        if (showOnScreen(this) && $(this).attr('show') != 'false' && stopNow != 0) {
            //console.log($(this).text())
            //console.log($(this).attr('show'))
            $(this).attr('show', 'false')
            numberAnimate(this)
            stopNow = stopNow - 1;
        }/* else if (!showOnScreen(this)) {
            $(this).attr('show', 'true')
        }*/
    })
}

function showOnScreen(target) {

    if ($(window).scrollTop() + $(window).height() >= $(target).offset().top)
      return true;
    else
        return false;
}

function numberAnimate(target) {
    var $this = $(target);
    jQuery({
        Counter: 0
    }).animate({
        Counter: $this.text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function() {
            $this.text(this.Counter.toFixed(1));
        }
    });
}

Fiddle

代码功能:

  1. 在1秒内将动画编号从0增加到给定数字。
  2. 如果数字在屏幕上,则在加载页面时,它会执行动画
  3. 如果屏幕上没有该号码,则在加载页面时,它会以滚动方式执行动画
  4. 所有数字只进行一次动画。
  5. 问题:有时,某些数字会以随机数停止(低于原始数字)。该脚本无法正常运行。我不知道,为什么会发生这种情况(也许是慢速互联网的bcz,或其他东西)。

    如何优化代码并解决问题?

0 个答案:

没有答案