Waypoints 计数器向上计数（然后向下计数）并且当 div 处于即时视图中时不执行脚本答案

【问题标题】：Waypoints counter counts up (then down) and doesn't execute script when div is in immediate viewWaypoints 计数器向上计数（然后向下计数）并且当 div 处于即时视图中时不执行脚本
【发布时间】：2019-10-07 08:27:28
【问题描述】：

我有一个可以计数的数字自动收报机。出于演示目的，这是how the counter is meant to work。它开始计数，然后停止。

现在，我正在尝试让代码脚本在#ticker 出现时执行。为此，我使用waypoints。但是，我遇到了以下问题：

#ticker 出现在视图中时，脚本并未立即执行。事实上，我必须滚动过去，然后当我向上滚动时，它开始计数。
计数器正在向上计数，到达结束数字然后向下计数？我只希望它向上计数并停止在结束数字加上字符串（在本例中为 16,000+）。

为什么会这样？

演示：

$(document).ready(function() {

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

})

function formatter(str) {
  // const delimeter = '-'
  const char = 'x'
  const template = str.replace(/\d/g, char)
  const value = str.replace(/\D/g, '')

  function revert(val) {
    // need better solution
    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;
}

<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="gap"></div>

【问题讨论】：

标签： javascript jquery jquery-waypoints waypoint

【解决方案1】：

Waypoint 插件有一个选项offset，它决定了应该在哪个位置触发处理程序，默认为0。这意味着您的处理程序只会在您的元素到达浏览器的顶部边缘时触发，并且每次您的元素到达浏览器的顶部边缘时才会触发。

这就是您的情况，您只需将偏移量传递给航点，它将被修复。

$(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: 3000,
          easing: 'swing',
          step: function(now) {
            $(this).text(format.revert(Math.ceil(now)));
          }
        });
      });
    },
    offset: '100%'
  });
})

function formatter(str) {
  // const delimeter = '-'
  const char = 'x'
  const template = str.replace(/\d/g, char)
  const value = str.replace(/\D/g, '')

  function revert(val) {
    // need better solution
    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;
}

<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="gap"></div>

【讨论】：