⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	9
📊 Variables & Constants	3
🟢 Vue Composition API	1
📐 Interfaces	2

📚 Table of Contents

• Imports
• Variables & Constants
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useRafFn/index.ts

📦 Imports

Name	Source
Pausable	@vueuse/shared
MaybeRefOrGetter	vue
ConfigurableWindow	../_configurable
tryOnScopeDispose	@vueuse/shared
computed	vue
readonly	vue
shallowRef	vue
toValue	vue
defaultWindow	../_configurable

---

Variables & Constants

Name	Type	Kind	Value	Exported
previousFrameTimestamp	number	let/var	0	✗
rafId	null | number	let/var	null	✗
delta	number	const	timestamp - previousFrameTimestamp	✗

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: UseRafFnOptions): Pausable

Code

export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: UseRafFnOptions = {}): Pausable {
  const {
    immediate = true,
    fpsLimit = undefined,
    window = defaultWindow,
    once = false,
  } = options

  const isActive = shallowRef(false)
  const intervalLimit = computed(() => {
    return fpsLimit ? 1000 / toValue(fpsLimit) : null
  })
  let previousFrameTimestamp = 0
  let rafId: null | number = null

  function loop(timestamp: DOMHighResTimeStamp) {
    if (!isActive.value || !window)
      return

    if (!previousFrameTimestamp)
      previousFrameTimestamp = timestamp

    const delta = timestamp - previousFrameTimestamp

    if (intervalLimit.value && delta < intervalLimit.value) {
      rafId = window.requestAnimationFrame(loop)
      return
    }

    previousFrameTimestamp = timestamp
    fn({ delta, timestamp })
    if (once) {
      isActive.value = false
      rafId = null
      return
    }
    rafId = window.requestAnimationFrame(loop)
  }

  function resume() {
    if (!isActive.value && window) {
      isActive.value = true
      previousFrameTimestamp = 0
      rafId = window.requestAnimationFrame(loop)
    }
  }

  function pause() {
    isActive.value = false
    if (rafId != null && window) {
      window.cancelAnimationFrame(rafId)
      rafId = null
    }
  }

  if (immediate)
    resume()

  tryOnScopeDispose(pause)

  return {
    isActive: readonly(isActive),
    pause,
    resume,
  }
}

• JSDoc:

  /**
   * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
   *
   * @see https://vueuse.org/useRafFn
   * @param fn
   * @param options
   */
  

• Parameters:

• fn: (args: UseRafFnCallbackArguments) => void
• options: UseRafFnOptions
• Return Type: Pausable
• Calls:
• shallowRef (from vue)
• computed (from vue)
• toValue (from vue)
• window.requestAnimationFrame
• fn
• window.cancelAnimationFrame
• resume
• tryOnScopeDispose (from @vueuse/shared)
• readonly (from vue)

loop(timestamp: DOMHighResTimeStamp): void

Code

function loop(timestamp: DOMHighResTimeStamp) {
    if (!isActive.value || !window)
      return

    if (!previousFrameTimestamp)
      previousFrameTimestamp = timestamp

    const delta = timestamp - previousFrameTimestamp

    if (intervalLimit.value && delta < intervalLimit.value) {
      rafId = window.requestAnimationFrame(loop)
      return
    }

    previousFrameTimestamp = timestamp
    fn({ delta, timestamp })
    if (once) {
      isActive.value = false
      rafId = null
      return
    }
    rafId = window.requestAnimationFrame(loop)
  }

• Parameters:
• timestamp: DOMHighResTimeStamp
• Return Type: void
• Calls:
• window.requestAnimationFrame
• fn

resume(): void

Code

function resume() {
    if (!isActive.value && window) {
      isActive.value = true
      previousFrameTimestamp = 0
      rafId = window.requestAnimationFrame(loop)
    }
  }

• Return Type: void
• Calls:
• window.requestAnimationFrame

pause(): void

Code

function pause() {
    isActive.value = false
    if (rafId != null && window) {
      window.cancelAnimationFrame(rafId)
      rafId = null
    }
  }

• Return Type: void
• Calls:
• window.cancelAnimationFrame

---

Interfaces

UseRafFnCallbackArguments

Interface Code

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
}

Properties

Name	Type	Optional	Description
delta	number	✗
timestamp	DOMHighResTimeStamp	✗

UseRafFnOptions

Interface Code

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
}

Properties

Name	Type	Optional	Description
immediate	boolean	✓
fpsLimit	MaybeRefOrGetter<number>	✓
once	boolean	✓

---