使用带逗号的动画递增数字：第 2 部分答案

【问题标题】：Increment number using animate with comma: Part 2使用带逗号的动画递增数字：第 2 部分
【发布时间】：2013-04-26 15:23:58
【问题描述】：

// Animate the element's value from x to y:
  function stepNum () {
 $({someValue: 40000}).animate({someValue: 45000}, {
  duration: 3000,
  easing:'swing', // can be anything
  step: function() { // called on every step
      // Update the element's text with rounded-up value:
      $('#el').text(commaSeparateNumber(Math.round(this.someValue)));
   }
 });

function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
}

$('.scene06').waypoint(function() { 
stepNum(); 
}, { offset: 400 })

所以，代码已经进化了一点。

从此question.

我已经将增量包装在一个函数中。它由用户向下滚动（通过waypoint.js）触发。但是我怎样才能让它只动画一次，而不是每次有人滚动它时重复。想法？

【问题讨论】：

我尝试过使用 promise()、done()、end()。但是那些只会杀死页面上正在进行的任何其他动画。我被难住了。
我不太明白你的意思。所以有人滚动的所有东西， stepNum() 都会被调用？它的代码是您发布的链接中的动画？
为了清晰起见，我添加了其余代码。

标签： jquery jquery-waypoints

【解决方案1】：

您应该能够传递 triggerOnce 参数

$('.scene06').waypoint(function() {  
{
    stepNum();
},  
{ 
    offset: 400,
    triggerOnce: true 
});

【讨论】：

很高兴我能帮上忙 :) Google 在这方面可能也值得称赞
不知道为什么他们在回答按钮上设置了一个计时器。 @路易吉·西里。但我会确保这样做。干杯！