window.onscroll Bugando animation

Question

I’m doing an animation where when the TOP > 2800 the animation will start. The animation will make the numbers inside a UL LI increase from 0 until the written number.

BUG: The number sometimes goes all the way up and another one comes up, or it goes up just a little bit and when you move the screen it goes up little by little.

    window.onscroll = function(){
   var top = window.pageYOffset || document.documentElement.scrollTop
   if( top > 2800 ) {
  $('.spincrement').spincrement({
    from: 0,
    decimalPlaces:0 ,
    duration: 4000,
  });
   }

};

Answer 1

IT WORKED OUT AS FOLLOWS.

            <script type="text/javascript">

var trava = false;
window.onscroll = function(){
   var top = window.pageYOffset || document.documentElement.scrollTop
   if( top > 2800 && !trava) {
      trava = true;
      $('.spincrement').spincrement({
         from: 0,
         decimalPlaces:0 ,
         duration: 4000,
         complete: function() { trava = true; }
      });
   }
};          
        </script>

Answer 2

As you know, the window.onscroll event is triggered when there is scrollbar scrolling event, keyboard input for scrolling, as well as the mouse. Therefore, the scenario of the bug you described is right by the code you showed, because when you fire your animation function, the window.onscroll event is still triggered. Therefore, it is only incremented little by little, ie when there is change in the scroll. Scenario:

top = 2801 -> fires its animation and stops; top = 2802 -> another scroll event occurs...

That must be causing such behavior. I understood that when you get to 2801 you want the animation to start and the onscroll event to stop and the animation to take place and finish the animation? Just once, right? If so, then you need to modify the code so that it occurs only once. A control variable or Event.preventDefault() can help you.