Счетчик продолжает считать (неправильно), когда div находится в поле зрения - PullRequest
Новая
       28

Счетчик продолжает считать (неправильно), когда div находится в поле зрения

0 голосов
/ 10 октября 2019

У меня есть счетчик чисел, и я использую путевые точки для запуска счетчика, когда отображается #ticker div.

Счетчик запускается, когда отображается div, поэтому проблема не в этом. Но вот пример использования моей текущей проблемы:

  1. Прокрутите вниз в демоверсии ниже, пока не дойдете до текста тикера.
  2. Подождите, пока тикер не перестанет считать (когда этодостигло статического значения 16,000+.
  3. Теперь прокрутите страницу вниз и вверх снова, пока тикер снова не появится, тикер иногда начинает обратный отсчет, а затем останавливается на странных числах, т.е. остановился на 15,604+, когда он всегда должен заканчиваться на 16,000+.

Не знаете, почему это происходит?

demo : 

$(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>

1 Ответ

1 голос
/ 10 октября 2019

Если вы прокрутите вниз до ticker и дождитесь завершения 16000, снова прокрутите вверх и дождитесь завершения 16000, а затем снова вернетесь, это сработает.

Код абсолютно правильный, кроме этоголиния const initial = $(this).text(). Вы используете сам текст элемента span, чтобы получить максимальное число счетчиков.

Когда вы выполняете слишком быструю прокрутку, код устанавливает любое значение, присутствующее в элементе 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%'
  });
})
...