Javascript 在scroll上验证条件是否满足，然后只运行一次函数

我有运行计数器的代码，从0到HTML标记内的文本定义的数字。这很好-我有四个元素使用这个类，当页面加载时，每个元素从0开始计数

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

我发现，当我滚动时，计数器一直在重新启动。我已经尝试使用附加到

.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>

4143
920
5112
76

---

我收到一个“无法读取未定义属性'createDocumentFragment'的错误。

一个滚动条中的

此

是窗口元素

$('.count').each(function(i) {      
  var elem = $(this);
  ...
  if (bottomOfWindow > topOfElement) {
    $(window).one('scroll',function(e) {
      $(elem).prop('Counter',0).animate({
        ...

---

正如Epasarello指出的，您正在对每个.scroll事件重新绑定.scroll事件。你只需要一个装订

但您还需要一种方法来确定启动了计数过程，并且不需要再次运行它。实现这一点的简单方法是向元素添加一个类

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

$（窗口）.on（'scroll'，函数（e）{
$（'.count'）。每个（函数（i，e）{
var topOfElement=$（e）.offset（）.top；
var bottomOfWindow=$（窗口）.scrollTop（）+$（窗口）.height（）；
如果（窗底>（地形缝+80））{
//调试器；
if（！$（e）.hasClass（'done'））{
$（e）.addClass（“完成”）；
设maxcnt=$（e）.text（）；
maxcnt=parseInt（maxcnt）；
$（e）.prop（'Counter'，0）.animate({
计数器：$（e）.text（）
}, {
期限：2000年，
放松:"摇摆",，
步骤：函数（maxcnt）{
$（e）.text（Math.ceil（maxcnt））；
}
});
}
}
});
});
div{height:250px；}

4143
920
5112
76
$（this）.prop（'Counter'，0）.animate（{
Hi.我认为这是由$（'.count'）定义的。每个（函数（I）{但我猜嵌套事件处理程序会破坏它？它是窗口，因为您将事件绑定到window将
window.scroll（）
继续激发，或将
.one（）
在第一个事件发生后删除事件处理程序？谢谢，我不确定我是怎么错过的。因此我修复了这个问题，并相信我遇到了@gibberish提到的问题，这才是真正的症结所在-计数器现在随着我的滚动而上下计数，所以它可能会重复启动。自从每次启动后，你所做的事情就没有什么意义了ou scroll您正在将scroll绑定到所有元素。scroll会触发很多次，因此您将大量事件绑定到元素。不知道您实际上在尝试做什么，这似乎是一个不同的问题。我认为这很清楚，抱歉。我有四个元素，当每个元素在页面上可见时，我想从0开始计算，但有一个根据问题标题，要想成功，我需要不断检查滚动条上的条件是否满足，同时只为每个元素触发一次计数器。问题是每次检查为真时都要绑定事件。它触发一次，但下一次，window.onscroll会触发你绑定它again@ColossalYouth是的，全局变量是一种很好的方法要解决这个问题，就像添加一个类一样。很高兴你解决了它。谢谢-与我提出的非常类似，但使用了一个变量而不是类。出于兴趣，maxcnt的用途是什么？我不需要它，但现在我想知道为什么。maxcnt是从每个跨度（该跨度中的文本）获取的值-因此当计数器达到该数字时（每个跨度不同），计算该跨度的停止次数。我不确定您是如何在问题示例代码中得到该数字的，但我从问题信息中推断出了该要求。您现在将
作为任何跨度的最大值，但我不知道该值是如何定义的。顺便说一句，使用类而不是全局变量的好处在于全局变量不需要预先定义（类名更具动态性/灵活性）。我还认为每个计数器需要一个全局变量（如果我们希望计数能够重叠，即两个可以同时计数），使用类也解决了这一需要。嘿，非常感谢这一点，它真的很有用。正是出于这个原因，我转而使用你的方法处理类-现在我将这一点应用到所有四个元素中，这就简单多了。