useAnimationFrame composable

Quasar v2.23+

useAnimationFrame() composable 的作用域与原生 requestAnimationFrame() 类似，但有一些关键区别。该 composable 会在组件被销毁或停用（与 keep-alive 相关）时自动"取消"动画帧，而且你还可以在下一个动画帧到来之前覆盖要执行的函数。

换句话说，如果你想在下一个动画帧调度一个函数，但可能需要在它执行之前覆盖甚至取消它，那么这就是你需要的 composable。

TIP

在 SSR 或 SSG 模式的服务器端，注册动画帧是一个空操作（no-op）。请在组件渲染生命周期之外显式启动服务器端工作，而不是在 setup() 期间创建定时器。

语法

import { useAnimationFrame } from 'quasar'

setup () {
  const {
    registerAnimationFrame,
    removeAnimationFrame
  } = useAnimationFrame()

  // ...
}

function useAnimationFrame(): {
  registerAnimationFrame(fn: () => void): void
  removeAnimationFrame(): void
}

示例

import { useAnimationFrame } from 'quasar'

setup () {
  const { registerAnimationFrame } = useAnimationFrame()

  function onSomeEvent (param) {
    registerAnimationFrame(() => {
      console.log('param is', param)
    })
  }

  // ...

  // 你可以连续多次调用 onSomeEvent()，
  // 但只有最后一次注册的函数会在
  // 动画帧到来时被执行
}

如果你需要在一个组件中使用多个 useAnimationFrame()，只需对返回对象的函数进行重命名：

const {
  registerAnimationFrame: registerFirstAnimationFrame,
  removeAnimationFrame: removeFirstAnimationFrame
} = useAnimationFrame()

const {
  registerAnimationFrame: registerSecondAnimationFrame,
  removeAnimationFrame: removeSecondAnimationFrame
} = useAnimationFrame()

发现错误？在浏览器中编辑此页

1. Introduction

2. 语法

3. 示例