Hice un sitio web estático; aquí está el enlace de GitHub: https://peepsenpai.github.io/ecommerce1/

Quiero mostrar la cuenta regresiva del 'contador de segundos' cuando esté visible en la ventana gráfica del usuario. mi DOM es así para esa sección en particular:

 <section class="counter-sec"> <div class="container"> <div class="row text-center"> <div class="col-md-3 mb-lg-0 mb-md-0 mb-4 mt-2"> <h3> <span id="count1"></span>+ </h3> <p>Sellable Items</p> </div> <div class="col-md-3 mb-lg-0 mb-md-0 mb-4"> <h3> <span id="count2"></span>+ </h3> <p>Total Sells</p> </div> <div class="col-md-3 mb-lg-0 mb-md-0 mb-4"> <h3> <span id="count3"></span>K+ </h3> <p>Customers</p> </div> <div class="col-md-3 mb-lg-0 mb-md-0 mb-4"> <h3> <span id="count4"></span>+ </h3> <p>Clients</p> </div> </div> </div> </section>

Y mi lógica es esta:

 document.addEventListener("DOMContentLoaded", () => { function counter(id, start, end, duration) { let object = document.getElementById(id), current = start, range = end - start, increment = end > start ? 1 : -1, step = Math.abs(Math.floor(duration / range)), timer = setInterval(() => { current += increment; object.textContent = current; if (current == end) { clearInterval(timer); } }, step); console.log(id); } counter("count1", 0, 1509, 3567); counter("count2", 0, 2000, 3456); counter("count3", 0, 500, 9567); counter("count4", 0, 600, 2000); });

Actualmente, la función se activa cada vez que todo el contenido del DOM está completamente cargado. por ahora, si coloco la sección en algún lugar de mi página, no puedo ver la cuenta regresiva desde el principio, porque ya comenzó mucho antes de que me desplace hacia esa parte. Quiero invocarlo solo cuando sea visible para el usuario. ¿Cómo puedo hacer eso?