Skip to content

⬅️ Back to Table of Contents

📄 useIntervalFn

📊 Analysis Summary

Metric Count
🔧 Functions 4
📦 Imports 10
🟢 Vue Composition API 1
📐 Interfaces 1
📑 Type Aliases 1

📚 Table of Contents

🛠️ File Location:

📂 packages/shared/useIntervalFn/index.ts

📦 Imports

Name Source
MaybeRefOrGetter vue
Fn ../utils
Pausable ../utils
isRef vue
shallowReadonly vue
shallowRef vue
toValue vue
watch vue
tryOnScopeDispose ../tryOnScopeDispose
isClient ../utils

Vue Composition API

Name Type Reactive Variables Composables
watch watch none none

Functions

useIntervalFn(cb: Fn, interval: MaybeRefOrGetter<number>, options: UseIntervalFnOptions): UseIntervalFnReturn

Wrapper for setInterval with controls

Parameters:

  • cb any: No description
  • interval any: No description
  • options any: No description

See: https://vueuse.org/useIntervalFn

Raw JSDoc 
/**
 * Wrapper for `setInterval` with controls
 *
 * @see https://vueuse.org/useIntervalFn
 * @param cb
 * @param interval
 * @param options
 */

Calls:

  • shallowRef (from vue)
  • clearInterval
  • clean
  • toValue (from vue)
  • cb
  • setInterval
  • resume
  • isRef (from vue)
  • watch (from vue)
  • tryOnScopeDispose (from ../tryOnScopeDispose)
  • shallowReadonly (from vue)
Code 
export function useIntervalFn(cb: Fn, interval: MaybeRefOrGetter<number> = 1000, options: UseIntervalFnOptions = {}): UseIntervalFnReturn {
  const {
    immediate = true,
    immediateCallback = false,
  } = options

  let timer: ReturnType<typeof setInterval> | null = null
  const isActive = shallowRef(false)

  function clean() {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }

  function pause() {
    isActive.value = false
    clean()
  }

  function resume() {
    const intervalValue = toValue(interval)
    if (intervalValue <= 0)
      return
    isActive.value = true
    if (immediateCallback)
      cb()
    clean()
    if (isActive.value)
      timer = setInterval(cb, intervalValue)
  }

  if (immediate && isClient)
    resume()

  if (isRef(interval) || typeof interval === 'function') {
    const stopWatch = watch(interval, () => {
      if (isActive.value && isClient)
        resume()
    })
    tryOnScopeDispose(stopWatch)
  }

  tryOnScopeDispose(pause)

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

Internal helpers

Declared inside another function in this file.

clean(): void

Returns: void

Calls:

  • clearInterval
Code 
function clean() {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }

pause(): void

Returns: void

Calls:

  • clean
Code 
function pause() {
    isActive.value = false
    clean()
  }

resume(): void

Returns: void

Calls:

  • toValue (from vue)
  • cb
  • clean
  • setInterval
Code 
function resume() {
    const intervalValue = toValue(interval)
    if (intervalValue <= 0)
      return
    isActive.value = true
    if (immediateCallback)
      cb()
    clean()
    if (isActive.value)
      timer = setInterval(cb, intervalValue)
  }

Interfaces

UseIntervalFnOptions

Interface Code 
export interface UseIntervalFnOptions {
  /**
   * Start the timer immediately
   *
   * @default true
   */
  immediate?: boolean

  /**
   * Execute the callback immediately after calling `resume`
   *
   * @default false
   */
  immediateCallback?: boolean
}

Properties

Name Type Optional Description
immediate boolean ✓ not shown
immediateCallback boolean ✓ not shown

Type Aliases

UseIntervalFnReturn

type UseIntervalFnReturn = Pausable;

Generated by Syntax Scribe