How To Animate Count For Two Variables Separately

I'm trying to animate the count for two sets of numbers on the same page on scroll. The following code works, but I've noticed it's slower to start and takes longer to complete the

Solution 1:

In my first answer, I may have misunderstood the nature of your code. It is possible that you only need the animations to run once, when the window.scroll has reached the top of the appropriate element. If so, all you need is an indicator to keep track of the state of the animation: false before the animation is enacted, and true afterwards. Only run the animation if the indicator is false.

You could use a global variable for this - or you could just add a class to the triggering element. Class-Missing (falsey) means the ani has not yet run, Class-Present means that it's been run already.

// Animated numbers when scrolled tovar a = 0;
$(window).scroll(function() {
    var oTop1 = $('.counter-1').offset().top - window.innerHeight;
    var oTop2 = $('.counter-2').offset().top - window.innerHeight;
    var done1 = $('.counter-1').hasClass('ani-done');
    var done2 = $('.counter-2').hasClass('ani-done');
    if (!done1 && a == 0 && $(window).scrollTop() > oTop1) {
        $('.animate-numbers-1').each(function() {
            //animation goes here
        });
        $('.counter-1').addClass('ani-done');
    }
    if (!done2 && a == 0 && $(window).scrollTop() > oTop2) {
        $('.animate-numbers-2').each(function() {
            //animation goes here
        });
        $('.counter-2').addClass('ani-done');
    }
});

Solution 2:

$(window).scroll() generates literally hundreds of events with a very short period of time.

In your code, each one of your animation events (hundreds within a few seconds) specifies a duration of one second. So: hundreds of events, taking one second each, all need to happen within a few seconds. The slowdown is not too surprising.

Wouldn't it be great if there was a way to restrict the events so that only one event would fire every so-many milliseconds? Or so that only one event would fire until there's been a break of so-many milliseconds?

A debouncer ensures that only one signal is sent for an event that may be happening many, many times. Throttling limits the number of calls that a function receives during a fixed time interval - for example, only one event per 500ms.) Or, as Chris Coyer explains the two:

Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds."

and

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."

In this article, David Walsh explains this very popular debounce function, taken from underscore.js:

functiondebounce(func, wait, immediate) {
    var timeout;
    returnfunction() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

The example Walsh uses to demonstrate how to use the above function is:

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

window.addEventListener('resize', myEfficientFn);

References:

https://davidwalsh.name/javascript-debounce-function

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

https://underscorejs.org/#debounce