当看到 div 时，计数器继续（错误地）计数

Question

我有一个数字计数器，当 #ticker div 出现时，我正在使用 waypoints 到运行计数器。

计数器在 div 出现时启动，所以这不是问题所在。但这是我当前问题的一个用例：

在下面的演示中向下滚动，直到看到代码文本。
等待自动收报机停止计数（当它达到 16,000+ 的静态值时。
现在，再次向下和向上滚动页面，直到再次看到自动收报机，自动收报机现在有时会倒计时，然后停在奇怪的数字处，即我的当前停在15,604+，而它应该总是以 16,000+.

不确定为什么会这样？

演示:

$(document).ready(function() {
  $('#ticker').waypoint({
    handler: function() {
      $('.count').each(function() {
        const initial = $(this).text()
        const format = formatter(initial)
        $(this).prop('Counter', 0).animate({
          Counter: format.value
        }, {
          duration: 1500,
          easing: 'swing',
          step: function(now) {
            $(this).text(format.revert(Math.ceil(now)));
          }
        });
      });
    },
    offset: '100%'
  });
})


// keep string after count
function formatter(str) {
  const char = 'x'
  const template = str.replace(/\d/g, char)
  const value = str.replace(/\D/g, '')

  function revert(val) {
    const valStr = val.toString()
    let result = ''
    let index = 0
    for (let i = 0; i < template.length; i++) {
      const holder = template[i]
      if (holder === char) {
        result += valStr.slice(index, index + 1)
        index++
      } else {
        result += holder
      }
    }
    return result
  }
  return {
    template: template,
    value: value,
    revert: revert
  }
}

.gap{
  background: lightgrey;
  height: 600px;
}

.gap2{
  background: blue;
  height: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<div class="gap"></div>
<div id="ticker">
  <span class="count counter">16,000+</span>
</div>
<div class="gap2"></div>

Answer 1

如果向下滚动到 ticker 并等待 16000 完成，然后再次向上滚动并等待 16000 完成然后再次向下滚动，它将起作用。

代码绝对正确，除了这一行 const initial = $(this).text()。您正在使用跨度元素文本本身来获取最大计数器编号。

只要您滚动得太快，代码就会将 span 元素中存在的任何值设置为最大计数器。这就是您获得有线行为的原因。

请像这样重写你的处理程序代码

$(document).ready(function () {
  var initialValue = $('#ticker .count').text()
  $('#ticker').waypoint({
    handler: function () {
      $('.count').each(function () {
        const format = formatter(initialValue)

        $(this).prop('Counter', 0).animate({
          Counter: format.value
        }, {
          duration: 1500,
          easing: 'swing',
          step: function (now) {
            $(this).text(format.revert(Math.ceil(now)));
          }
        });
      });
    },
    offset: '100%'
  });
})

当看到 div 时，计数器继续（错误地）计数

Counter continues to count (incorrectly) when div is in view

javascript

jquery

jquery-waypoints