Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Принудительно вывести содержимое кэша JavaScript (https://javascript.ru/forum/misc/86020-prinuditelno-vyvesti-soderzhimoe-kehsha-javascript.html)

V__K 28.07.2024 12:57

Принудительно вывести содержимое кэша JavaScript
 
Всем здравствуйте!
Написал программу, которая должна выполнять анимацию в виде плавного смещения div'а по вертикали из позиции 100px в позицию 200px:
<style>
div#square {
	position: absolute;				
	height: 100px;
	width: 100px;
	background-color: red;
}
</style>
<input type="submit" value="Go" onclick="go()"/>
<div id="square"></div>
<script>		
function go() {			
	for(i=100;i<200;i++) {			
		document.getElementById("square").style.top = i+"px";
	}
}
</script>

Однако работает она не так, как ожидалось. Вместо плавного перемещения, div сразу прыгает в позицию 200px. По-видимому, все изменения, вносимые JavaScript-ом в документ как бы кэшируются до завершения обработчика события. Есть ли возможность принудительно выводить содержимое этого кэша до завершения обработчика? Например, какая-нибудь функция наподобие fflush в Си? Чтобы можно было написать вот так вот, и программа бы заработала:
<input type="submit" value="Go" onclick="go()"/>
<div id="square"></div>
<script>		
function go() {			
	for(i=100;i<200;i++) {			
		document.getElementById("square").style.top = i+"px";
                //Очищаем кэш и выводим его содержимое на экран
                fflush(html);
	}
}
</script>

PS: Я знаю, что такую анимацию правильнее реализовывать с помощью setTimeout. Интерес чисто технический, возможно ли в принципе заставить работать тот код, который я привёл.

Aetae 28.07.2024 13:36

Нет. Цикл атомарная операция. Т.е. пока идёт цикл - ничёго больше не идёт. Вообще. Страница "зависает".
Даже если бы ты добился этого своего fflush, ты бы всё равно ничего не увидел - т.к. цикл отрабатывает моментально.

В цикле можно использовать await, который добавит задержки между итерациями, но под капотом это уже совсем не цикл, а цепочки промисов.

Анимация же нынче делается через requestAnimationFrame (который подстраивается под частоту кадров монитора) в js вместо setTimeout, и transform: translate (который считается на GPU и не влияет на разметку) в css вместо изменения позиции.

MallSerg 28.07.2024 16:14

Чем гадать и предполагать лучше научится использовать инструменты дающие точные ответы на большинство вопросов клавиша f12 и вкладка профилировщика там все действия логируются и довольно наглядно отображаются в виде графиков.


Часовой пояс GMT +3, время: 14:11.