1---
2category: Animation
3---
4 
5# useRafFn
6 
7Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
8 
9## Usage
10 
11```ts
12import { useRafFn } from '@vueuse/core'
13import { shallowRef } from 'vue'
14 
15const count = shallowRef(0)
16 
17const { pause, resume } = useRafFn(() => {
18  count.value++
19  console.log(count.value)
20})
21```
22 
23## Type Declarations
24 
25```ts
26export interface UseRafFnCallbackArguments {
27  /**
28   * Time elapsed between this and the last frame.
29   */
30  delta: number
31  /**
32   * 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}.
33   */
34  timestamp: DOMHighResTimeStamp
35}
36export interface UseRafFnOptions extends ConfigurableWindow {
37  /**
38   * Start the requestAnimationFrame loop immediately on creation
39   *
40   * @default true
41   */
42  immediate?: boolean
43  /**
44   * The maximum frame per second to execute the function.
45   * Set to `null` to disable the limit.
46   *
47   * @default null
48   */
49  fpsLimit?: MaybeRefOrGetter<number | null>
50  /**
51   * After the requestAnimationFrame loop executed once, it will be automatically stopped.
52   *
53   * @default false
54   */
55  once?: boolean
56}
57/**
58 * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
59 *
60 * @see https://vueuse.org/useRafFn
61 * @param fn
62 * @param options
63 */
64export declare function useRafFn(
65  fn: (args: UseRafFnCallbackArguments) => void,
66  options?: UseRafFnOptions,
67): Pausable
68```
69