Skip to content

useRafFn ​

Category
Export Size
342 B
Last Changed
last week

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

Demo ​

Frames: 0
Delta: 0ms
FPS Limit: 60

Usage ​

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

const count = ref(0)

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

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?: number
}
/**
 * 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 ​

Source • Demo • Docs

Contributors ​

Anthony Fu
max.lee
Hayk Khachatryan
Dan Rose
Enzo Innocenzi
Jelf
he yifan
Alex Kozack
Jacob Clevenger
Scott Bedard
Antério Vieira

Changelog ​

v10.8.0 on 2/20/2024
69990 - fix: fix fpsLimit option, fix #3481, close #3482
v10.5.0 on 10/7/2023
8e4c0 - feat: option fpsLimit (#3459)
v10.2.1 on 6/28/2023
cf6eb - fix: set initial delta to zero (#3150)
v9.12.0 on 1/29/2023
39183 - feat(useRafFn, useIntervalFn, useTimeoutFn): make status readonly (#2685)
v9.7.0 on 12/16/2022
692d0 - feat: add delta and timestamp (#2493)
v8.9.3 on 7/14/2022
c3dd7 - fix!: rename type RafFnOptions to UseRafFnOptions (#1887)

Released under the MIT License.