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)