Skip to content

useRafFn

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

¥Call function on every requestAnimationFrame. With controls of pausing and resuming.

示例

Frames: 0
Delta: 0ms
FPS Limit: 60

用法

¥Usage

ts
import { 
useRafFn
} from '@vueuse/core'
import {
shallowRef
} from 'vue'
const
count
=
shallowRef
(0)
const {
pause
,
resume
} =
useRafFn
(() => {
count
.
value
++
console
.
log
(
count
.
value
)
})

类型声明

显示类型声明
ts
export interface UseRafFnCallbackArguments {
  /**
   * Time elapsed between this and the last frame.
   */
  
delta
: number
/** * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}. */
timestamp
:
DOMHighResTimeStamp
} export interface UseRafFnOptions extends ConfigurableWindow { /** * Start the requestAnimationFrame loop immediately on creation * * @default true */
immediate
?: boolean
/** * The maximum frame per second to execute the function. * Set to `undefined` to disable the limit. * * @default undefined */
fpsLimit
?:
MaybeRefOrGetter
<number>
/** * After the requestAnimationFrame loop executed once, it will be automatically stopped. * * @default false */
once
?: boolean
} /** * Call function on every `requestAnimationFrame`. With controls of pausing and resuming. * * @see https://vueuse.org/useRafFn * @param fn * @param options */ export declare function
useRafFn
(
fn
: (
args
: UseRafFnCallbackArguments) => void,
options
?: UseRafFnOptions,
):
Pausable

源代码

源代码示例文档

变更日志

最近没有更改