Как сделать так, чтобы функция запускалась только один раз после изменения свойств css после прокрутки? - PullRequest
Новая
       27

Как сделать так, чтобы функция запускалась только один раз после изменения свойств css после прокрутки?

0 голосов
/ 17 апреля 2020

Я работаю над веб-страницей и заставил некоторые цифры отображаться после того, как пользователь прокрутил их раздел страницы. Я хотел бы, чтобы числа начинали считать с нуля и останавливались на их соответствующих значениях, но каждый раз, когда я прокручиваю, счет продолжается. Пожалуйста, как я могу это исправить? Вот разметка и скрипт: 

(function() {
	var num = document.querySelectorAll('.stats li h3');
	for (i = 0; i < num.length; i++) {
		num[i].innerHTML = 0;
	}

	function scrollAppear() { //To display the statistics upon scrolling to its section of the page
		const stat = document.querySelector('.stats li');
		const stats = document.querySelectorAll('.stats li');
		const appearsAt = stat.getBoundingClientRect().top; //The distance of the element from the top of the screen
		const scrollPos = window.innerHeight / 0.5; //The height of the device screen`

		if (appearsAt < scrollPos) { //Displays the content when the distance of the element from the top of the screen becomes less than the screen height
			for (i = 0; i < stats.length; i++) {
				stats[i].style = 'opacity: 1;';
				count();
			}

			function count() {
				var num = document.querySelectorAll('.stats li h3');
				for (i = 0; i < num.length; i++) {
					num[i].innerHTML = 0;
				}
				var x = 0;
				var i = 0;
				setInterval(()=>{
					if (x < 100) {
						i = 0
						for (i = 0; i < num.length; i++) {
							num[i].innerHTML = parseInt(num[i].innerHTML, 10) + 1;
						}
						x++;
					}
				}, 10);
			};
		}
	}
	window.addEventListener('scroll', scrollAppear);
}());
<ul class="stats">
				<li>
					<img src="https://via.placeholder.com/50g" alt="attendees">
					<h3>100</h3>
					<span>Attendees</span>
				</li>
				<li>
					<img src="https://via.placeholder.com/50" alt="speakers">
					<h3>100</h3>
					<span>Speakers</span>
				</li>
				<li>
					<img src="https://via.placeholder.com/50" alt="partners">
					<h3>100</h3>
					<span>Partners</span>
				</li>
				<li>
					<img src="https://via.placeholder.com/50" alt="sponsors">
					<h3>100</h3>
					<span>Sponsors</span>
				</li>
			</ul>
...