Принудительно вывести содержимое кэша 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. Интерес чисто технический, возможно ли в принципе заставить работать тот код, который я привёл. |
Нет. Цикл атомарная операция. Т.е. пока идёт цикл - ничёго больше не идёт. Вообще. Страница "зависает".
Даже если бы ты добился этого своего fflush, ты бы всё равно ничего не увидел - т.к. цикл отрабатывает моментально. В цикле можно использовать await, который добавит задержки между итерациями, но под капотом это уже совсем не цикл, а цепочки промисов. Анимация же нынче делается через requestAnimationFrame (который подстраивается под частоту кадров монитора) в js вместо setTimeout, и transform: translate (который считается на GPU и не влияет на разметку) в css вместо изменения позиции. |
Чем гадать и предполагать лучше научится использовать инструменты дающие точные ответы на большинство вопросов клавиша f12 и вкладка профилировщика там все действия логируются и довольно наглядно отображаются в виде графиков.
|
| Часовой пояс GMT +3, время: 15:49. |