当我在 div 上滚动一次时，在数字上运行 JQuery 动画

Question

我有一个单页样式的网站，在中间的某个地方我有一些数字作为统计数据。当用户在刷新页面后第一次找到 div 时，我尝试让它们计数，直到它们达到统计数据。我没有使用插件的选项，所以我只尝试使用 JQuery。

代码如下：

$(window).scroll(function(){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $("#our-company").offset().top;
    var elemBottom = elemTop + $("#our-company").height();

    if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
       start_count();
    }
});

function start_count(){
    $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
}

id = our-company 的 div 是包含统计信息的 div，所有数字都在一个类为 class = count 的跨度中。我的代码中的问题是，在我向下滚动统计数据并查看数字计数后，如果我再次上下滚动，它们会从头开始。如何让它运行一次？

Answer 1

为什么不放一个标志 var ？

var alreadyRun = false;
[...]
 if (alreadyRun == false && (elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
   alreadyRun = true;
   start_count();
}
[...]

干杯