jQuery animtion stops when user scrolls

问题

I'm using multiple number elements on my site which are counting up after hitting the visible area of the viewport.

That part works until the user manually scrolls the page. If the user scrolls up or down, the animation stops for a second and repeats when the user don't scroll anymore. It looks very buggy.

If I try to replicate the problem in a fiddle, the same code always works without the "stuttering"?

jQuery(function($) {
  $(function($, win) {
    $.fn.inViewport = function(cb) {
      return this.each(function(i, el) {
        function visPx() {
          var H = $(this).height(),
            r = el.getBoundingClientRect(),
            t = r.top,
            b = r.bottom;
          return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
        }
        visPx();
        $(win).on("resize scroll", visPx);
      });
    };
  }(jQuery, window));

  $(".fig-number").inViewport(function(px) {
    // if px>0 (entered V.port) and
    // if prop initNumAnim flag is not yet set = Animate numbers
    if (px > 0 && !this.initNumAnim) {
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation

      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 10000,
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    }
  });
});

html,
body {
  height: 100%;
}

.spacer {
  height: 100%;
  width: 100%;
  display: block;
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spacer">
  scroll down
</div>
<div class="number-box">
  <h1 class="fig-number">1000</h1>
  <h1 class="fig-number">1500</h1>
</div>
<div class="spacer">
  scroll down
</div>
<div class="number-box">
  <h1 class="fig-number">2000</h1>
  <h1 class="fig-number">2500</h1>
</div>
<div class="spacer">
  scroll down
</div>
<div class="number-box">
  <h1 class="fig-number">3000</h1>
  <h1 class="fig-number">3500</h1>
</div>

The working fiddle (same code): https://jsfiddle.net/JSCray/r7g0vn93/3/

来源：https://stackoverflow.com/questions/54902102/jquery-animtion-stops-when-user-scrolls

标签

javascript

jquery

html

jquery-animate

viewport