Skip to content

useRafFn

Category
Export Size
385 B
Last Changed
3 months ago

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

Demo

帧数:1
间隔时间:33毫秒
FPS 限制:60

用法

js
import { useRafFn } from '@vueuse/core'
import { shallowRef } from 'vue'

const count = shallowRef(0)

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

Type Declarations

Show Type Declarations
typescript
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

Source

SourceDemoDocs

Contributors

Anthony Fu
丶远方
Anthony Fu
IlyaL
btea
Robin
OrbisK
max.lee
Hayk Khachatryan
Dan Rose
Enzo Innocenzi
Jelf
he yifan
Alex Kozack
Jacob Clevenger
Scott Bedard
Antério Vieira

Changelog

v12.7.0 on
3041e - feat: add once option (#4583)
v12.1.0 on
4759f - feat: allow framerate to be a reactive value (#4409)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.8.0 on
69990 - fix: fix fpsLimit option, fix #3481, close #3482
v10.5.0 on
8e4c0 - feat: option fpsLimit (#3459)
v10.2.1 on
cf6eb - fix: set initial delta to zero (#3150)

Released under the MIT License.