javascript - 验证滚动条件是否满足，然后只运行一次函数

Question

我有运行计数器的代码，从 0 到由 HTML 标记内的文本定义的数字。这工作正常 - 我有四个元素使用该类，每个元素都会在页面加载时从 0 开始计数。

但棘手的是，我希望相应的计数器在每个元素进入 View 时开始。

我发现，当我滚动时，计数器不断重新启动。我尝试使用附加到 .scroll() 事件处理程序的 jQuery .one() 方法，但我需要不断检查条件是否满足元素是可见的，这就是我脱颖而出的地方。

这是我所拥有的:

$(window).on('scroll',function(e) {
    $('.count').each(function(i) {      
        var topOfElement = $(this).offset().top;
        var bottomOfWindow = $(window).scrollTop() + $(window).height();

        if (bottomOfWindow > topOfElement) {
            $(window).one('scroll',function(e) {    
                $(this).prop('Counter',0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            });
        }
    });
});

和简单的 HTML:

<span class="count">4143</span>
<span class="count">920</span>
<span class="count">5112</span>
<span class="count">76</span>

我收到“无法读取未定义的属性‘createDocumentFragment’”错误。

Answer 1

正如 epascarello 指出的那样，您在每个 .scroll 事件上重新绑定(bind)了 .scroll 事件。您只需要一个绑定(bind)。

但是您还需要一种方法来确定计数过程已经触发，并且不需要再次运行。简单的方法是向元素添加一个类。

我也没有看到您是如何从 span 标记中获取 maxcount 值的。

$(window).on('scroll',function(e) {
    $('.count').each(function(i, e) {      
        var topOfElement = $(e).offset().top;
        var bottomOfWindow = $(window).scrollTop() + $(window).height();

        if (bottomOfWindow > (topOfElement + 80)) {
        //debugger;
            if ( !$(e).hasClass('done') ){
                $(e).addClass('done');
                
                let maxcnt = $(e).text();
                maxcnt = parseInt(maxcnt);
                $(e).prop('Counter',0).animate({
                    Counter: $(e).text()
                }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function (maxcnt) {
                        $(e).text(Math.ceil(maxcnt));
                    }
                });
            }
        }
    });
});

div{height:250px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div></div>
<span class="count">4143</span>
<div></div>
<span class="count">920</span>
<div></div>
<span class="count">5112</span>
<div></div>
<span class="count">76</span>
<div></div>