Javascript 如何在滚动中只制作一次动画

这是我的代码：

countEach（）
$（窗口）.on（'scroll'，函数（e）{
countEach（）
})
函数countEach（）{
$（'.count'）。每个（函数（）{
if（showOnScreen（this）&&$（this.attr（'show'）！='false'））{
console.log（$（this.text（））
console.log（$（this.attr（'show'））
$（this.attr（'show'，'false'））
号码（本）
}如果（！屏幕上显示（此））{
$（this.attr（'show'，'true'））
}
})
}
屏幕上的功能显示（目标）{
如果（$（窗口）.scrollTop（）+$（窗口）.height（）>=$（目标）.offset（）.top）
返回true；
其他的
返回false；
}
函数编号RANIMATE（目标）{
变量$this=$（目标）；
jQuery({
柜台:0
}).制作动画({
计数器：$this.text（）
}, {
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$this.text（this.Counter.toFixed（1））；
}
});
}

5.6























/>








向上滚动，然后再次向下滚动

5.6使用全局变量。开始时将其设置为
false
。在滚动事件中，检查它，如果它仍然是
false
，运行
countEach（）
函数，然后将变量更改为
true
。像这样：

var stop = false;

countEach();
$(window).on('scroll', function(e) {
  if(!stop){
    countEach();
    stop = true;
  }
})

使用全局变量。开始时将其设置为
false
。在滚动事件中，检查它，如果它仍然是
false
，运行
countEach（）
函数，然后将变量更改为
true
。像这样：

var stop = false;

countEach();
$(window).on('scroll', function(e) {
  if(!stop){
    countEach();
    stop = true;
  }
})

将事件绑定代码更改为：

$(window).on('scroll', function(e) {
    countEach()
})

到

然后像这样改变每个函数

function countEach() {
    $('.count').each(function() {
        ...
    });

    $(window).off('scroll', countEach); // add this line
}

将事件绑定代码更改为：

$(window).on('scroll', function(e) {
    countEach()
})

到

然后像这样改变每个函数

function countEach() {
    $('.count').each(function() {
        ...
    });

    $(window).off('scroll', countEach); // add this line
}

您需要将全局变量声明为
stopNow=2
，以便动画只能运行两次，并在动画运行时将其递减

var stopNow = 2;

按如下方式更新每个函数的计数

function countEach() {
    $('.count').each(function() {
        //also check stopNow != 0
        if (showOnScreen(this) && $(this).attr('show') != 'false' && stopNow != 0) {
            console.log($(this).text())
            console.log($(this).attr('show'))
            $(this).attr('show', 'false')
            numberAnimate(this)
            stopNow = stopNow - 1;  //decrement stopNow
        } else if (!showOnScreen(this)) {
            $(this).attr('show', 'true')
        }
    })
}

这是您更新的工作小提琴-
您需要将全局变量声明为
stopNow=2
，这样您的动画只能运行两次，并在动画运行时将其递减

var stopNow = 2;

按如下方式更新每个函数的计数

function countEach() {
    $('.count').each(function() {
        //also check stopNow != 0
        if (showOnScreen(this) && $(this).attr('show') != 'false' && stopNow != 0) {
            console.log($(this).text())
            console.log($(this).attr('show'))
            $(this).attr('show', 'false')
            numberAnimate(this)
            stopNow = stopNow - 1;  //decrement stopNow
        } else if (!showOnScreen(this)) {
            $(this).attr('show', 'true')
        }
    })
}

这是你最新的工作小提琴-
你是说像这样吗？？它不起作用。在fiddle中查看结果，感谢broIt在您开始滚动时计数（但您没有看到它，因为您仍然没有到达底部计数器，并且您的
showOnScreen
功能存在问题，阻止顶部计数器计数）。你希望它如何工作？你想让它计数，当你到达底部，然后停止？如果是这样，用拉杰的答案。你的意思是这样吗？？它不起作用。在fiddle中查看结果，感谢broIt在您开始滚动时计数（但您没有看到它，因为您仍然没有到达底部计数器，并且您的
showOnScreen
功能存在问题，阻止顶部计数器计数）。你希望它如何工作？你想让它计数，当你到达底部，然后停止？如果是这样，用拉杰的答案，像这样？但是数字在滚动之前是这样的吗？但数字在滚动之前会有动画