Срабатывания счетчика цифр при иностранном формате чисел

[voraa]

Но как добиться того чтобы разделитель в тысячных числах был не через пробел:

Пробел или запятая или еще что зависит от настроек браузера, сайта или элемента.
Например можно задавать, через атрибут lang в самом html или в конкретном элементе. Брать значение этого атрибута и указывать.
Например
const form = new Intl.NumberFormat('en-En');
или
const form = new Intl.NumberFormat('ru');

https://jsfiddle.net/fa64prL0/

Я там для элемента, который на 1700 поставил lang="en-En"

[NastyaVs]

Я там для элемента, который на 1700 поставил lang="en-En"

Теперь поняла. Спасибо Вам большое за уделенное время

[NastyaVs]

voraa,
К вашему варианту еще решила добавить такую процедуру чтобы счетчик срабатывал только тогда когда при скролле достигнет этого блока, но так понимаю он не сработает:

const check = new IntersectionObserver(
	(entries) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				check.disconnect();
				counterNumbers();
			}
		});
	},
	{
		root: null, // viewport, для отслеживания в пределах другого элемента (указать в этом месте)
		rootMargin: "0px", // margin вокруг root
		threshold: 1, // пороговое значение для отображения (100% для элемента)
	}
);

check.observe(document.querySelector(".block__item_grid"));

[voraa]

Что такое check.disconnect(); ?

А так может и сработает. Пробовать надо.
Сам не могу не имея полного кода с CSS.

Только надо понять, а что дальше. Ну сработал обсервер, начали циферки
тикать. А пользователь дальше мышью крутит туда-сюда. Когда элемент появится снова опять надо считать или хватит одного первого раза.
А если опять считать, когда еще предыдущий не закончился, то все равно начинать снова с 0, или дать закончиться предыдущему циклу.

Все эти вопросы надо продумывать.

[NastyaVs]

Что такое check.disconnect(); ?

voraa, Точно не скажу. Решение нашла.

if (entry.isIntersecting) {
	            // сработает когда элемент будет виден на 90%
	            observer.disconnect();
	            startProgress();

По моему в ней и крылась ошибка. Я ее исключила и вроде бы как заработало. Я пробовала, посмотрите, пожалуйста: https://codepen.io/NastyaVs/pen/vYPpvXP

Только не очень корректно срабатывает у меня когда возврат к блоку происходит при скролле

Только надо понять, а что дальше. Ну сработал обсервер, начали циферки тикать. А пользователь дальше мышью крутит туда-сюда. Когда элемент появится снова опять надо считать или хватит одного первого раза.

voraa, Вроде бы в этом решении все реализовано.

А если опять считать, когда еще предыдущий не закончился, то все равно начинать снова с 0, или дать закончиться предыдущему циклу.

voraa, Решение делает просчет счетчика цифр, сначала когда при скролле пользователь возвращается в данному блоку

[voraa]

Решение делает просчет счетчика цифр, сначала когда при скролле пользователь возвращается в данному блоку

Если так и задумывалось, то вроде работает

Только не очень корректно срабатывает у меня когда возврат к блоку происходит при скролле

А в чем некорректность?

[NastyaVs]

А в чем некорректность?

В принципе так и задумывалось. Но такое ощущение если возвращаться к блоку и скроллить очень медленно и когда только видишь краешек блока заметные старые значения. А если блок уже существенную часть видно уже на экране то отсчет идет сначала как и задумывалось.


Вот только мои Progress Bar ведут себя абсолютно безобразно при таком решении.

1. Первый Progress Bar - при первом обращении все корректно показывает. Но при возврате к нему обратно при скролле счетчик чисел считает бесконечно значения, а сам зеленый бар замкнулся и не все.

2. Второй Progress Bar - при первом обращении счетчик цифр отрабатывает очень быстро не успеваешь к нему даже дойти чтобы увидеть как пролистываются цифры. При этом зеленый бар при первом подходе отображается как надо. Но уже при повторном возврате ко всему Progress Bar он абсолютно не осуществляет повторно никаких действий. Можете посмотреть в чем ошибка:
https://codepen.io/NastyaVs/pen/qBvpgLb

[voraa]

А вы сами эти коды пишете? Или надергиваете где то не думая?
Что у вас означает clearInterval();? (встречается 2 раза)
Какой именно таймер надо сбросить?

Почему 2 раза вызывается startProgress(); и еще один раз вызываются без счетчики без функции?

Я уже показывал, как делать анимацию с помощью requestAnimationFrame. А вы опять setInterval городите.
Хотите, что бы опять все кто то переделывал?

[NastyaVs]

А вы сами эти коды пишете? Или надергиваете где то не думая?

Сама учусь, смотря материал на Youtube. Понимаю что очень много ошибок

Что у вас означает clearInterval();? (встречается 2 раза)
Какой именно таймер надо сбросить?

Пример реализации брала здесь https://www.youtube.com/watch?v=mSfsGTIQlxg&t=486s

[NastyaVs]

Почему 2 раза вызывается startProgress(); и еще один раз вызываются без счетчики без функции?

Подсмотрела на форуме. Подумала так и должно быть