Как остановить цикличность счетчика после прокрутки?

Добрый день,

Использую jquery.animateNubmer.

<span class="sdelaliCount" data-count="100">0</span>
<span class="sdelaliCount" data-count="50">0</span>
...

var windowHeight = $(window).height();
	var $this = $(".sdelaliCount");
	$(document).on('scroll', function() {
		$this.each(function() {
			var tcount = $this.data("count");
			height = $this.offset().top + $this.height();
			if ($(document).scrollTop() + windowHeight >= height) {
				$this.animateNumber({ number: tcount, easing: 'easeInQuad'}, 1000);
			}
		});
	});


Проблема такая - при скролле страницы на этот блок, счетчик начинает работать без остановки.

Подскажите, как убрать эту цикличность?
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
KickeRocK
@KickeRocK
FrontFinish
Может где-то с фигурными налажал
const windowHeight = $(window).height(),
   $this = $(".sdelaliCount");
let countFlag = false;
  $(document).on('scroll', function() {
    $this.each(function() {
      var tcount = $this.data("count");
      height = $this.offset().top + $this.height();
      if ($(document).scrollTop() + windowHeight >= height && !countFlag) {
countFlag = true;
        $this.animateNumber({ number: tcount, easing: 'easeInQuad'}, 1000),function() {
      countFlag = false;
    };
      }
    });
  });

UPD: https://jsfiddle.net/kickerock/0sgz5nhv/23/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы