useVisibleTask$()

使用 useVisibleTask$() 在组件恢复后执行代码。这对于在应用程序恢复时在客户端设置计时器或流很有用。

track()useVisibleTask$()

useVisibleTask$() 接收一个 track() 函数,就像 useTask$() 一样。使用 track() 函数在存储更新时触发效果。有关更多信息,请参阅 响应式

组件生命周期和 SSR

Qwik 是可恢复的。可恢复性意味着应用程序在服务器上启动,然后传输到客户端。在客户端,应用程序从停止的地方继续执行。一个常见的用例是在服务器上创建组件,暂停,然后在客户端恢复。为了使组件完全正常工作,可能需要在客户端急切地执行代码以设置计时器或流。

useVisibleTask$() 是一个仅限客户端的方法。(服务器上没有等效方法。)

注意 有关需要在客户端和服务器上执行的行为,请参阅 useTask$()

何时执行 useVisibleTask$()

客户端效果代码在组件恢复后执行。useVisibleTask$() 方法接受一个额外的参数 ({strategy:'intersection-observer|document-ready|document-idle'}),它控制何时执行效果。有三个选项

  • intersection-observer (默认):任务将在元素在视口中可见时首次执行,在幕后它使用 IntersectionObserver API。
  • document-ready:任务将在文档准备就绪时首次执行,在幕后它使用文档加载事件。
  • document-idle:任务将在文档空闲时首次执行,在幕后它使用 requestIdleCallback API。

示例

该示例显示了一个在折线下方渲染的时钟组件。使用 useVisibleTask$() 使时钟每秒更新当前时间,使其在客户端正常工作。我们提供了实用函数 updateClock 来帮助您实现。

请记住,useVisibleTask$() 应该返回一个清理函数,该函数释放 setInterval 计时器,以便在组件卸载/销毁时可以正确清理计时器。

编辑教程