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

Question

[Константин]

Добрый день,

Использую 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);
			}
		});
	});

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

Подскажите, как убрать эту цикличность?

Answer 1

[Andrew]

Может где-то с фигурными налажал

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/

Comments

[Константин]

Тоже вводил наподобие countFlag.
Во всех span счетчик отрабатывает до первого значения и останавливается

[Andrew]

Константин, после этого надо проскроллить.

$this.animateNumber({ number: tcount, easing: 'easeInQuad'}, 1000),function() {
      countFlag = false;
console.log('end');

попробуйте так и скажите вывелось ли в консоль 'end'

[Константин]

Andrew, Не вывелось

[Andrew]

Константин,

$this.animateNumber({ number: tcount, easing: 'easeInQuad'}, 1000, function() {
      $('#countdown').text('Countdown completed!')
    });

вот так должно работать

[Константин]

Andrew, не хочет.
Также крутит до значения первого span

[Andrew]

Константин, закиньте всё в песочницу

[Константин]

Andrew, https://jsfiddle.net/dukonst/qsfht37u/18/

[Константин]

Andrew, не было идей?

[Andrew]

Константин, завал был
https://jsfiddle.net/kickerock/0sgz5nhv/
держите. Перезапускает вроде

[Константин]

Andrew, там логика такая - при скролле на блок срабатывает счетчик, доходит до указанной в data-count цифре и останавливается. Т.е. перезапускаться при скролле не должно.
И изначальная моя проблема, что счетчик не останавливался

[Andrew]

Константин, ну так у вас так и было, нет?
https://jsfiddle.net/kickerock/0sgz5nhv/23/

[Константин]

Andrew, счетчик в span должен крутить до указанной в data-count цифры.

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

В первом span до 100, во втором до 50 и тд.

[Andrew]

Константин, в ответе https://jsfiddle.net/kickerock/0sgz5nhv/23/

[Константин]

Большущее спасибо!