jquery - jQuery 计数器开始在滚动时增加，但不会在最大值处停止

Question

我的页面上有一个使用以下代码的计数器：

$(window).scroll(function(){    
if ($(window).scrollTop() > 1400) {
    var max = 67;
    incCounter();
    $('#counter').fadeIn(800);
    }

    function incCounter() {
      var currCount = parseInt($('#counter').html());
      $('#counter').html(currCount+1);
      if (currCount+1 != max) {
        setTimeout(incCounter, 20);
      }
}
}

它从 0 开始，然后继续，不会在最大值处停止。我如何让它这样做？

Answer 1

jsFiddle 演示

问题是，即使您发现要满足的值，您仍会不断增加计数器。您需要像这样稍微重新组织您的功能：

function incCounter() {
  var currCount = parseInt($('#counter').html());
  if (currCount != max) {
    $('#counter').html(currCount+1);//only increment when possible
    setTimeout(incCounter, 20);
  }
}

Answer 2

你似乎从不检查自己是否处于底部。在我看来，您检查了 scrollTop，但即使您到达该功能，您仍然会进入该函数并增加计数器。

我建议你检查一下你是否在底部，如果你是那么不要调用 incCounter 函数

这可能会有所帮助。检查用户是否滚动到底部

哦，你永远不会停止 TimeOut，所以它会继续下去。

所以

var myInterval = setTimeout(incCounter, 20)

然后

window.clearInterval(myInterval)