useRafFn

类别

Animation

导出体积

385 B

上次更改

3 weeks ago

在每次 requestAnimationFrame 上调用函数。具有暂停和恢复控制。

示例

源码

帧数：0

间隔时间：0毫秒

FPS 限制：60

用法

import { useRafFn } from '@vueuse/core'
import { ref } from 'vue'

const count = ref(0)

const { pause, resume } = useRafFn(() => {
  count.value++
  console.log(count.value)
})

类型声明

typescript

export interface UseRafFnCallbackArguments {
  /**
   * 当前帧与上一帧之间经过的时间。
   */
  delta: number
  /**
   * 自网页创建以来经过的时间。参见 {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin 时间起点}。
   */
  timestamp: DOMHighResTimeStamp
}
export interface UseRafFnOptions extends ConfigurableWindow {
  /**
   * 在创建时立即开始 requestAnimationFrame 循环。
   *
   * @default true
   */
  immediate?: boolean
  /**
   * 每秒执行函数的最大帧数。
   * 设置为 `undefined` 来禁用限制。
   *
   * @default undefined
   */
  fpsLimit?: MaybeRefOrGetter<number>
}
/**
 * 在每次 `requestAnimationFrame` 上调用函数。具有暂停和恢复控制。
 *
 * @see https://vueuse.org/useRafFn
 * @param fn
 * @param options
 */
export declare function useRafFn(
  fn: (args: UseRafFnCallbackArguments) => void,
  options?: UseRafFnOptions,
): Pausable