如何对两个变量进行动画计数

Question

我试图动画两组数字在同一页上的滚动计数。下面的代码可以工作，但我注意到启动速度较慢，完成动画所需时间也较长。此外，我认为代码可以优化和改进。

JS

// Animated numbers when scrolled to
var a = 0;
$(window).scroll(function() {
  var oTop1 = $('.counter-1').offset().top - window.innerHeight;
  var oTop2 = $('.counter-2').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop1) {
    $('.animate-numbers-1').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-target');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 1000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }
        });
    });
  }
  if (a == 0 && $(window).scrollTop() > oTop2) {
    $('.animate-numbers-2').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-target');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2500,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }
        });
    });
  }
});

如果您能提供任何信息，我们将不胜感激。

Answer 1

在我的第一个回答中，我可能误解了您代码的本质。当window.scroll到达适当元素的顶部时，您可能只需要运行一次动画。如果是这样的话，您只需要一个指示符来跟踪动画的状态:在动画颁布之前为false，之后为true。只有当指示符为假时才运行动画。

您可以为此使用一个全局变量--或者只需在触发元素中添加一个类。类缺失(falsey)表示ani尚未运行，类当前表示它已经运行.

// Animated numbers when scrolled to
var 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');
    }
});

Answer 2

$(window).scroll()可以在很短的时间内生成数百个事件。

在您的代码中，每个动画事件(几秒钟内就有数百个)指定了一秒钟的持续时间。因此:数百个事件，每一秒钟，都需要在几秒钟内发生。经济放缓并不令人感到意外。

如果有一种方法来限制事件，使每毫秒只触发一个事件，那不是很好吗？或者说只有一个事件会触发，直到有这么多毫秒的中断？

抑制器确保只为可能发生多次或多次的事件发送一个信号。节流限制了函数在固定时间间隔内接收的调用次数--例如，每500 of只有一个事件。或者，作为克里斯·科耶解释了这两个

节流强制执行一个函数可以随时间被调用的最大次数。如“每100毫秒最多执行一次此函数”，。

和

解除强制要求在没有调用的情况下，在经过一定时间之后才再次调用函数。正如在“只在100毫秒没有被调用的情况下执行此函数”中所述，。

在本文中，David Walsh解释了这个非常流行的退出函数，摘自underscore.js。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        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);
    };
};

Walsh用于演示如何使用上述函数的示例如下：

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

window.addEventListener('resize', myEfficientFn);

参考文献：

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

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

https://underscorejs.org/#debounce