Question

这是我的代码：

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));
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ratingcount">7.8</span>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<span class="ratingcount">7.8</span>

这段代码的作用是什么？

制作数字动画
从0开始编号动画，并将其填写为ratingcount class
如果屏幕上显示该号码，则会进行动画制作。
如果屏幕上没有显示该号码，它只会在滚动时播放动画，因此用户可以看到它。
滚动时只进行一次动画（如果再次滚动，则无效）

现在，有时候，当互联网速度很慢或类似的情况下，脚本无法正常工作或停止。我尽力优化它，有人可以帮助我更好地优化它，所以它可以在所有或大多数条件下每次都有效。

如何优化我的数字动画javascript代码？

0 个答案: