Why function does work different?

  const number = document.querySelectorAll(".number");
  const advantages = document.querySelector('.advantages');
  const speed = 100;
  function counter() {
    number.forEach(element => {
      incNumber(element);
    });
    function incNumber(elem) {
      let text = +elem.innerText;
      const value = +elem.getAttribute("data-count");
      const inc = Math.ceil(value / speed);
      if(text < value) {
        elem.innerText = inc + text;
        setTimeout(() => {
          incNumber(elem);
        }, 20);
      } else {
        elem.style.marginLeft = "0.5em";
        elem.innerText = value;
      }
    }
}

// counter();


  function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}


document.addEventListener('scroll', function () {
    if(isInViewport(advantages)) {
      counter();
    }

}, {
    passive: true
});