Jquery 数字计数器只有一次

Question

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

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

这是JSFiddle：http://jsfiddle.net/tw6g2oeu/325/

如何阻止函数倒计时？

编辑

最终使用了jQuery Waypoints插件：

jQuery('.numbers').waypoint(function() {
  $('.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()
},{offset:'75%'});

this.destroy((; 方法可防止它多次触发。

Answer 1

因为你添加了jQuery标签。 你可以使用 jQuery 航点插件。它会为您完成工作。

用法：

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