Почему скорость setInterval не меняется?

Question

[Сергей Бурдужа]

У меня есть меню.
При клике на пунктах меню начинается скроллинг к блокам, на сайте.
В setInterval я меняю различные значения, но скорость одна и та же.
Если даже поменяю на такое значение
let id = setInterval(scrollToMenuItem, 0.0000001);
Скорость не изменится.

/*scroll to menu elements
	=======================================*/ 
	function scrollToMenu(menuId){
		let menu = document.getElementById(menuId);

		menu.addEventListener('click', function(e){
			e.preventDefault();
			let target = e.target;
			let href = target.getAttribute('href');
			let elem = document.querySelector(href);
			let scrollTarget = elem.offsetTop - 100;

			console.log(scrollTarget);

			let currentPos = window.pageYOffset;
			console.log(currentPos);

			let id = setInterval(scrollToMenuItem, 1);

			function scrollToMenuItem(){

				if(currentPos != scrollTarget){
					if(scrollTarget > currentPos){
						window.scrollTo(0, currentPos);
						currentPos++;
					}else{
						window.scrollTo(0, currentPos);
						currentPos--;
					}
				}else{
					clearInterval(id);
				}
			}


		});

	}

	scrollToMenu('js-menu');

В чем может быть причина?
Эта моя первая анимация на чистом js.

Заранее благодарен.

Answer 1

[Антон Антон]

https://learn.javascript.ru/settimeout-setinterval

У браузерного таймера есть минимальная возможная задержка. Она меняется от примерно нуля до 4 мс в современных браузерах. В более старых она может быть больше и достигать 15 мс.

По стандарту, минимальная задержка составляет 4 мс. Так что нет разницы между setTimeout(..,1) и setTimeout(..,4).

Посмотреть минимальное разрешение «вживую» можно на следующем примере.

Comments

[Сергей Бурдужа]

Понятно, значит придется использовать setTimeout?

[dollar]

Сергей Бурдужа, setTimeout - это тот же setInterval, только в профиль.

Answer 2

[dollar]

Функция из setInterval выполняется не с периодичностью, которая указана вторым параметром, а несколько иначе:
1) Выполняется функция.
2) Выполняется прочий код (события).
3) Работа браузера.
4) Работа других приложений и ОС.
5) Тупо ожидание следующего тика (для всех таймеров).
6) Проверка. Если прошло время, указанное во втором параметре, то обнулить таймер и выполнить п.1
И вот в этом вся соль. Время выполнения функции может быть больше, чем интервал. Например, функция выполняется 3мс, а интервал у вас 1мс. Тогда не будет особой разницы, интервал 1мс, 0.5мс или 0.00001 мс. Вы можете даже указать 0мс - это не значит, что у вас в момент выполнится бесконечное количество итераций.
Работа браузера тоже может быть не нулевой, а вполне существенной. Например, анимированный скролл к заданной позиции может занимать приличное время (10мс, к примеру), и пока он происходит, все прочие ивенты и таймеры игнорируются.

Comments

[Сергей Бурдужа]

Вот ссылка на пример link
Ну слишком медленно скролится.
Вот код, немного изменил.

function scrollToMenu(menuId){
		let menu = document.getElementById(menuId);

		menu.addEventListener('click', function(e){
			e.preventDefault();
			let target = e.target;
			let href = target.getAttribute('href');
			let elem = document.querySelector(href);
			let scrollTarget = elem.offsetTop - 100;


			let currentPos = window.pageYOffset;


			let fps = 50; // 50 кадров в секунду 

			var timer = setInterval(function() { 
				if (currentPos == scrollTarget){
					clearInterval(timer);
					return;
				} else {
					if(scrollTarget > currentPos){
						currentPos++;
						window.scrollTo(0, currentPos);
					}else{
						currentPos--;
						window.scrollTo(0, currentPos);
					}
				} 			
			}, 10 / fps);
		});

	}

	scrollToMenu('js-menu');

[Stalker_RED]

Сергей Бурдужа, почему fps 50? Что такое 10/50? Задержка в 0.2мс, серьезно?

[Сергей Бурдужа]

Stalker_RED, Ну тут я, конечно, перемудрил, признаю.
Но, даже если поставить одну миллисекунду, все равно скорость маленькая.

Когда использую jquery, то скорость намного больше.
Думаю, что тут другой алгоритм нужно использовать.

[dollar]

Попробуйте считать время между вызовами. И скроллить пропорционально этому времени. Тогда по идее скорость не должна зависеть от fps браузера.
let timestamp = ((new Date()).getTime();
Как-то так.