Щоб була плавна анімація повинна підтримуватися велика (60) фпс. Для цього, як кажуть, треба, щоб скрипт був розбитий на шматочки по 10 мілісекунд. Не розумію, що мається на увазі під словами "розбити скрипт на частини"? Скрипт - це послідовність інструкцій, а інструкції відокремлювати крапкою з комою один від одного. Тобто, скрипт - послідовність СПОКОНВІКУ відокремлені один від одного частин-інструкцій. Браузер виконав одну інструкцію і ВІДРАЗУ приймається за наступну. Раз пишуть про 10 мілісекунд, то виходить, що можна якось "упакувати" інструкції, щоб інструкції "пачками" виконувати. Як це зробити? Між цими пачками зазори тимчасові є? як зрозуміти, що одна "пачка" (набір) інструкцій відокремлена від іншої "пачки" інстуркції? У мене є тільки одна думка, як відокремити два набору інструкцій - це запхати один набір в одну функцію, а інший - в другу, причому другу функцію викликати сетТаймаутом. Більше ідей немає. Коли таймери починають використовуватися в скрипті, а скрипт складний, можна дуже легко заплутатися в скрипті.
заданий 14 Серпня '16 о 20:47
Виконання скрипта як правило відбувається синхронно. Під час синхронного виконання всі дії в браузері повністю блокуються до закінчення виконання скрипта. Ви не зможете при такому підході і виконувати довгий скрипт і щось ще при цьому оновлювати. Вам доведеться чекати, поки весь скрипт повністю не виконається.
FPS - Frame Per Second - це скільки разів за секунду перемальовувати екран, тобто щось на ньому оновлювалося при необхідності. Тому фактично Вам треба виконати набір інструкцій, зробити паузу давши браузеру час проаналізувати / застосувати інструкції і потім знову запустити наступну порцію синхронних інструкцій. Для цього використовуються не синхронні, а асинхронні функції. Типовий приклад, це setTimeout і SetInterval. А так же різноманітні події браузера.
Для прикладу зразкового списку асинхронних подій, можна почитати цю статтю: ruseller: Основи побудови асинхронних додатків
Можна так само розглянути типовий випадок анімації або як варіант простіше лічильника, що б зрозуміти всю суть подій, що відбуваються. По суті, лічильник, це як раз типовий випадок рендеринга значень.
Синхронний варіант працювати не буде.
Увага! Скрипт нижче після натискання на кнопку швидше за все намертво повісить сторінку або навіть весь браузер.
А ось використання асинхронних подій буде працювати справно і нормально оновлювати сторінку в браузері, оскільки вони не блокують виконання потоку до моменту свого запуску.