仅当父幻灯片在视口中可见时，javaScript计数器（带逗号）才能启动

Question

我正在一个滑块上工作，每个滑块在其中都包含一个具有不同值的计数器。当视口中可见幻灯片时，计数器应从“ 0”开始。下面是滑块的屏幕截图-右上角的橙色CounterBox。

Slider with Counter

我已将此代码用于其他帖子的计数器-

$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');

$({
  countNum: $this.text()
}).animate({
  countNum: countTo
},

{
  duration: 5000,
  easing: 'linear',
  step: function() {
    $this.text(commaSeparateNumber(Math.floor(this.countNum)));
  },
  complete: function() {
    $this.text(commaSeparateNumber(this.countNum));
    //alert('finished');
  }
}
);

});

function commaSeparateNumber(val) {
  while (/(\d+)(\d{3})/.test(val.toString())) {
  val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
}
return val;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="counter" data-count="1000000"></span>

任何帮助都很棒！谢谢。