jQuery счетчик зависает при прокрутке

Question

Я пытаюсь активировать jQuery функцию подсчета с помощью функции прокрутки до определенного идентификатора Div, мне это удается, но я сталкиваюсь с проблемой, как только продолжаю прокручивать, пока числа полностью не обновятся на экране.

Каждый раз, когда я прокручиваю до определенного идентификатора div, запускается функция прокрутки, но если я прокручиваю снова, она останавливает цифры и продолжает отсчет, когда я прекращаю прокрутку.

Как я могу прокрутить до определенного div и активировать функцию счетчика не останавливая его при дальнейшей прокрутке?

//Counter
$(window).scroll(function () {
 var a = 0;

  var oTop = $('#stats').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.number').each(function() {
      var $this = $(this),
      countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {

          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }

        });
    });
    a = 1;
  }

});

#stats{
    background: #222629;
    width: 100%;
    height: auto;
}
#stats .space{
    padding: 10px;
    height: auto;
}
.sectiontitle {
  margin: 30px 0 0px;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  direction: rtl;
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}
.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}



//Counter
.holder{
    width: 50% !important;
}
.counter{
  display: flex;
  margin-top: 3%;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.counter .item1{
  vertical-align: middle;
  width: 16.66%;
  height: 100%;
  text-align: center;
  padding: 0;
  margin: 20px 0;
}
.counter .item1 i{
  color: #fff;
  font-size: 4em;
  text-shadow: 1px 1px 1px #ccc;
}
.counter .item1 p.number{
  color: #fff;
  font-size: 3em;
  text-shadow: 1px 1px 1px #ccc;
}
.counter .item1 p.label{
  color: #fff;
  font-size: 1.1em;
  text-shadow: 1px 1px 1px #ccc;
  text-transform: lowercase;
}
.counter .item1:hover i, 
.counter .item1:hover p{
  color: #cecece;
}

@media (max-width: 786px){
  .counter .item1 {
     flex: 0 0 50%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<section id="stats">
         <div class="space">
            <div class="sectiontitle">
                <h2 style="color: white;">פרוייקטים וסטטיסטיקות</h2>
                <span class="headerLine" style="background-color: white;"></span>
            </div>
             
             
             
             
             <div class="holder">
              <div class="counter ">
                <div class="item1" style="background-color:">
                  <i class="fas fa-laptop" style="font-size: 2em; color: white; text-shadow: 1px 1px 1px #ccc;"></i>
                  <p data-count="5743" class="number">0</p>
                  <p class="label">פיתוח בשעות</p>
                </div>
                <div class="item1">
                  <i class="far fa-smile" style="font-size: 2em; color: white; text-shadow: 1px 1px 1px #ccc;"></i>
                  <p class="number" data-count="8">0</p>
                  <p class="label">לקוחות מרוצים</p>
                </div>
                <div class="item1">
                  <i class="fas fa-briefcase" style="font-size: 2em; color: white; text-shadow: 1px 1px 1px #ccc;"></i>
                  <p data-count="6" class="number">0</p>
                  <p class="label">פרוייקטים שסויימו</p>
                </div>
                <div class="item1">
                  <i class="fas fa-coffee" style="font-size: 2em; color: white; text-shadow: 1px 1px 1px #ccc;"></i>
                  <p data-count="53" class="number">0</p>
                  <p class="label">כוסות קפה</p>
                </div>
              </div>
             </div>
             
             
             
         </div>
     </section>

Answer 1

Как упомянул @Atul, сделайте var a = 0; глобальной переменной, которая решает проблему. Еще лучше сделать это булл.

<script>
  //Counter
  var a = 0;
  $(window).scroll(function () {