- PVSM.RU - https://www.pvsm.ru -
Автор статьи, перевод которой мы сегодня публикуем, решил рассказать о нескольких необычных способах измерения времени в браузерах. Для их использования понадобится доступ к различным API, которые применяются в веб-разработке, поэтому они не подходят для платформы Node.js. Правда, если кто-то нуждается в необычном способе измерения времени в Node.js, то, полагаем, после прочтения этого материала у него могут появиться кое-какие идеи на этот счёт.
Так как веб-воркеры, в сущности, представляют собой потоки, работающие в веб-браузере, в них можно запускать бесконечные циклы, не рискуя заблокировать главный поток. Это позволяет работать с отрезками времени, длительность которых составляет менее миллисекунды. Такая точность особенно хорошо подходит для тех случаев, когда в воркере нужно принимать решения, которые сильно зависят от времени. О принятии этих решений можно (с очень высоким уровнем точности) сообщать в главный поток. Например, можно что-то выводить в том случае, когда количество прошедших с некоего события микросекунд представлено простым числом. Для того чтобы работать со временем с микросекундной точностью, можно воспользоваться методом performance.now [2].
setInterval
, вызов метода воркера terminate
гарантирует то, что после завершения работы воркера от него больше не будут поступать сообщения со сведениями о времени. В MDN по этому поводу говорится следующее: «Метод terminate()
интерфейса Worker
немедленно завершает работу воркера. Ему не дается возможность завершить свою работу, он останавливается сразу».→ Пример [3] на Codesandbox
Этот метод подразумевает создание некоего элемента с бесконечной анимацией. Тут можно попробовать воспользоваться элементом div
, но надо сказать, что, как отмечено во 2 пункте перечня недостатков этого метода, элементами div
для этих целей лучше не пользоваться. Итак, если у нас имеется элемент с бесконечной анимацией, мы можем подписаться на его событие animationiteration
и получать уведомления в те моменты, когда будет истекать интервал animation-duration
.
div
из DOM. Например, если имеется React-компонент, который выводит время, то ничего особенного при его отмонтировании делать не нужно. Элемент div
будет удалён и событие больше вызываться не будет..addEventListener("animationiteration", fun).
animation-delay
.<just-a-timer-element></<just-a-timer-element>
. Возможно — стоит создать пользовательский элемент, внутри которого аккуратно спрятан код CSS-анимации? (всё это — довольно спорные идеи, на самом деле).display: none;
.→ Пример [4] на Codesandbox
Взгляните на следующий SVG-элемент:
<svg>
<rect>
<animate
attributeName="rx"
values="0;1"
dur="1s"
repeatCount="indefinite"
/>
</rect>
</svg>
Если воспользоваться следующим кодом: animate.addEventListener('repeat', fun)
, то функция fun
будет вызываться каждые dur
секунд. В нашем случае — каждую секунду.
display: none;
.→ Пример [5] на Codesandbox
Web Animations API [6] позволяет анимировать DOM-элементы средствами JavaScript-кода.
Интересно то, что можно анимировать даже отмонтированные элементы! Это даёт доступ к механизмам работы со временем, доступным в чистом JavaScript (и в Web API).
Вот альтернативная реализация setTimeout
:
function ownSetTimeout(callback, duration) {
const div = document.createElement('div');
const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 });
const animation = new Animation(
keyframes,
document.timeline
);
animation.play();
animation.addEventListener('finish', () => {
callback();
});
}
Аккуратно, правда?
setTimeout
.onfinish
.→ Пример [7] на Codesandbox
Для того чтобы работать со временем, можно воспользоваться Web Audio API. Это — ещё один замечательный способ точной работы с интервалами и задержками. Вот [8] отличная статья об этом.
Я понимаю, что методики работы со временем, которые я тут перечислил, способны принести пользу далеко не всем. Но я просто не мог не написать эту статью, так как всегда думал, что setTimeout
и setInterval
— это единственные способы для асинхронной работы с некими отрезками времени. А на самом деле, как оказалось, это — далеко не всё. Кто знает, возможно, кому-то придётся столкнуться с какими-то необычными ограничениями при работе над неким проектом, с какими-то особыми условиями, в которых освещённые здесь методы работы со временем могут оказаться полезными.
Уважаемые читатели! Как вы думаете, в каких ситуациях могут пригодиться описанные здесь подходы работы со временем?
Автор: ru_vds
Источник [9]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/347797
Ссылки в тексте:
[1] Image: https://habr.com/ru/company/ruvds/blog/489818/
[2] performance.now: https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
[3] Пример: https://codesandbox.io/s/web-worker-timer-eiczf
[4] Пример: https://codesandbox.io/s/css-animation-timer-fvssk
[5] Пример: https://codesandbox.io/s/svg-animate-as-timer-u8zun
[6] Web Animations API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
[7] Пример: https://codesandbox.io/s/web-animations-api-as-a-timer-duv5q
[8] Вот: https://www.html5rocks.com/en/tutorials/audio/scheduling/
[9] Источник: https://habr.com/ru/post/489818/?utm_source=habrahabr&utm_medium=rss&utm_campaign=489818
Нажмите здесь для печати.