Javascript Jquery数字计数器仅一次

我已经构建了这个数字计数器脚本，当数字在视口中时，它将数字计数到目标。不幸的是，由于某种原因，它们也会再次倒数

$(window).scroll(function(){
  // This is then function used to detect if the element is scrolled into view
  function elementScrolled(elem)
  {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }

  // This is where we use the function to detect if ".numbers" is scrolled into view
  if(elementScrolled('.numbers')) {

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

  }
});

---

这个函数是this.destroy（）；方法防止它多次触发

因为您添加了jQuery标记。您可以使用jQuery航路点插件。它会帮你的

用法：

$('.entry').waypoint(function() {
   alert('You have scrolled to an entry.'); \\ increment your counter here
});

---

您需要取消滚动事件（还有其他选项）。基本上，每次窗口滚动一小段时间，你的事件就会触发——这可能是100次，每次都需要4秒的时间来轻松地进入和退出。在处理程序中添加一个

console.log（“scroll”）

来查看。scroll事件很棘手，您不知道它被触发了多少次。你可以在没有事件的情况下实现你想要实现的目标。检查这个

$('.entry').waypoint(function() {
   alert('You have scrolled to an entry.'); \\ increment your counter here
});