Наблюдатель пересечения: когда элемент находится в поле зрения, счетчик статистики увеличивается, как и должен, но как т ⇐ Javascript

[Гость]

Извините за еще один вопрос, но я впервые использую наблюдатель пересечений, и он работает частично. Как только элементы пересекаются в первый раз, счетчик статистики увеличивается, как и должен, но как только они не пересекаются и возвращаются к пересечению, счетчик выходит далеко за пределы значения и не останавливается. Как я могу предотвратить это?

let statContainer = document.getElementsByClassName("stat-container"); const Observer = новый IntersectionObserver(stat => { stat.forEach(stat => { если (stat.isIntersecting) { for (var i = 0; i < statContainer.length; i++) { пусть контейнер = statContainer; letcircularProgress =Container.querySelector(".circular-progress"), ProgressValue =Container.querySelector(".progress-value"); пусть ProgressStartValue = 0, ProgressEndValue = ProgressValue.textContent, скорость = 10; пусть прогресс = setInterval(() => { прогрессстартвалуе++; ProgressValue.textContent = `${progressStartValue}%`; roundProgress.style.background = `conic-gradient(#099bf0, #7cbf3d,#00b3cf, #1f58f2, #5618d4 ${progressStartValue * 3.6}deg, #EAEAEC 0deg)`; если (progressStartValue == ProgressEndValue) { ClearInterval (прогресс); } }, скорость); } } еще { console.log("не пересекается") } }) }); Observer.observe(statContainer[0]); *{ маржа: 0; заполнение: 0; размер коробки: граница-коробка; семейство шрифтов: «Поппинс», без засечек; } тело{ высота: 100вх; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; фон: #7d2ae8; } .контейнер{ дисплей: гибкий; ширина: 420 пикселей; отступ: 50 пикселей 0; радиус границы: 8 пикселей; фон: #fff; разрыв между строками: 30 пикселей; гибкое направление: столбец; выровнять-элементы: по центру; } .circular-прогресс{ положение: относительное; высота: 250 пикселей; ширина: 250 пикселей; радиус границы: 50%; фон: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg); дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; } .circular-progress::before{ содержание: ""; позиция: абсолютная; высота: 210 пикселей; ширина: 210 пикселей; радиус границы: 50%; цвет фона: #fff; } .progress-value{ положение: относительное; размер шрифта: 40 пикселей; вес шрифта: 600; цвет: #7d2ae8; } .текст{ размер шрифта: 30 пикселей; вес шрифта: 500; цвет: #606060; Тест 55 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. 70 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. 67 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.