useVisibleTask$()
Используйте useVisibleTask$() для выполнения кода после возобновления работы компонента. Этот приём часто используется для настройки таймеров или потоков, когда приложение возобновляет работу на клиенте.
track() и useVisibleTask$()
useVisibleTask$() получает функцию track(), как и useTask$(). Используйте функцию track() для запуска эффекта при обновлении состояния хранилища. Дополнительная информация в разделе реактивность.
Жизненный цикл компонента и SSR
Qwik возобновляем. Возобновляемость означает, что приложение запускается на сервере, а затем передаётся клиенту. На клиенте приложение продолжает выполнение с того места, где остановилось. Частым примером применения является создание компонента на сервере, приостановка, а затем возобновление рабоыт на клиенте. Чтобы сделать компонент полностью функциональным, может потребоваться немедленное выполнение кода на клиенте для установки таймеров или потоков.
useVisibleTask$() - браузерный метод (на сервере нет эквивалентного метода).
ПРИМЕЧАНИЕ Используйте
useTask$()для реализации поведения, которое должно работать как на клиенте, так и на сервере.
Когда выполняется useVisibleTask$()?
Код клиентского эффекта выполняется после возобновления работы компонента. Метод useVisibleTask$() принимает дополнительный аргумент ({strategy:'intersection-observer|document-ready|document-idle'}), который контролирует, когда эффект будет выполнен. Есть три варианта:
intersection-observer(по умолчанию): задача начнёт выполняться когда элемент становится виден в области просмотра, под капотом она использует API IntersectionObserver;document-ready: задача начнёт выполняться когда документ будет готов, под капотом она использует событие загрузки документа;document-idle: задача начнёт выполняться когда документ простаивает, под капотом она использует API requestIdleCallback.
Пример
В примере показан компонент часов, который отображается за пределами экрана. Используйте useVisibleTask$(), чтобы заставить часы обновлять текущее время каждую секунду пока они работают на клиенте. Мы предоставили служебную функцию updateClock, чтобы помочь вам это реализовать.
Помните, что useVisibleTask$() должна возвращать функцию очистки, которая освободит таймер setInterval, чтобы таймер можно было правильно очистить при размонтировании/уничтожении компонента.