Принудительно вывести содержимое кэша 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, время: 14:11. |