Skip to content
On this page

useRafFn

Category
Last Changed
3 months ago

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

Demo

Count: 0

Usage

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

const count = ref(0)

const { pause, resume } = useRafFn(() => {
  count.value++
  console.log(count.value)
})
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

export interface RafFnOptions extends ConfigurableWindow {
  /**
   * Start the requestAnimationFrame loop immediately on creation
   *
   * @default true
   */
  immediate?: 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: Fn, options?: RafFnOptions): Pausable
export interface RafFnOptions extends ConfigurableWindow {
  /**
   * Start the requestAnimationFrame loop immediately on creation
   *
   * @default true
   */
  immediate?: 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: Fn, options?: RafFnOptions): Pausable

Source

SourceDemoDocs

Contributors

Anthony Fu
Alex Kozack
Jacob Clevenger
Scott Bedard
Antério Vieira

Changelog

v7.4.0 on 12/18/2021
c6361 - fix: only runs on client, close #1044
v6.0.0-beta.2 on 8/9/2021
ff21b - feat: use tryOnScopeDispose instead of tryOnUnmounted
useRafFn has loaded