Jquery數字計數器只有一次

我已經構建了這個數字計數器腳本，用於在視口中計算達到目標的數字。不幸的是，由於某種原因，他們又被倒數了。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)); 
     } 
    }); 
}); 

    } 
});

這裏的的jsfiddle：http://jsfiddle.net/tw6g2oeu/325/

我怎麼能阻止回計數功能？

EDIT

結束了使用了jQuery路標插件：

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（）;方法可以防止它多次觸發。

來源

2017-02-13 user3615851

你需要* *去抖您滾動事件（還有其他選擇）。基本上，每次窗口滾動一小部分時，事件就會發生 - 這可能是100次，每次都會花費4秒鐘來緩解輸入。在處理程序中添加一個'console.log（「scroll」）'來查看。 –

滾動事件是棘手的，你不知道它被觸發多少次。你可以實現你在沒有事件的情況下實現的目標。檢查這個http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-滾動 – Khaleel

因爲您添加了jQuery標記。你可以使用jQuery waypoint插件。它會爲你做這項工作。

用法：

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

來源

2017-02-13 10:27:56 Khaleel

Jquery數字計數器只有一次

回答

相關問題