⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

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

📚 Table of Contents

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

🛠️ 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

---

Variables & Constants

Name	Type	Kind	Value	Exported
timer	ReturnType<typeof setInterval> | null	let/var	null	✗

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

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

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,
  }
}

• JSDoc:

  /**
   * Wrapper for `setInterval` with controls
   *
   * @param cb
   * @param interval
   * @param options
   */
  

• Parameters:

• cb: Fn
• interval: MaybeRefOrGetter<number>
• options: UseIntervalFnOptions
• Return Type: UseIntervalFnReturn
• Calls:
• shallowRef (from vue)
• clearInterval
• clean
• toValue (from vue)
• cb
• setInterval
• resume
• isRef (from vue)
• watch (from vue)
• tryOnScopeDispose (from ../tryOnScopeDispose)
• shallowReadonly (from vue)

clean(): void

Code

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

• Return Type: void
• Calls:
• clearInterval

pause(): void

Code

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

• Return Type: void
• Calls:
• clean

resume(): void

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)
  }

• Return Type: void
• Calls:
• toValue (from vue)
• cb
• clean
• setInterval

---

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	✓
immediateCallback	boolean	✓

---

Type Aliases

UseIntervalFnReturn

type UseIntervalFnReturn = Pausable;

---