Skip to content

⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric Count
🔧 Functions 4
📦 Imports 8
📊 Variables & Constants 1
📐 Interfaces 1
📑 Type Aliases 1

📚 Table of Contents

🛠️ File Location:

📂 packages/shared/useTimeoutFn/index.ts

📦 Imports

Name Source
MaybeRefOrGetter vue
AnyFn ../utils
Stoppable ../utils
shallowReadonly vue
shallowRef vue
toValue vue
tryOnScopeDispose ../tryOnScopeDispose
isClient ../utils

Variables & Constants

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

Functions

useTimeoutFn(cb: CallbackFn, interval: MaybeRefOrGetter<number>, options: UseTimeoutFnOptions): UseTimeoutFnReturn<CallbackFn>

Code 
export function useTimeoutFn<CallbackFn extends AnyFn>(
  cb: CallbackFn,
  interval: MaybeRefOrGetter<number>,
  options: UseTimeoutFnOptions = {},
): UseTimeoutFnReturn<CallbackFn> {
  const {
    immediate = true,
    immediateCallback = false,
  } = options

  const isPending = shallowRef(false)

  let timer: ReturnType<typeof setTimeout> | null = null

  function clear() {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
  }

  function stop() {
    isPending.value = false
    clear()
  }

  function start(...args: Parameters<CallbackFn> | []) {
    if (immediateCallback)
      cb()
    clear()
    isPending.value = true
    timer = setTimeout(() => {
      isPending.value = false
      timer = null

      cb(...args)
    }, toValue(interval))
  }

  if (immediate) {
    isPending.value = true
    if (isClient)
      start()
  }

  tryOnScopeDispose(stop)

  return {
    isPending: shallowReadonly(isPending),
    start,
    stop,
  }
}

  • JSDoc: 

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

  • Parameters:

  • cb: CallbackFn
  • interval: MaybeRefOrGetter<number>
  • options: UseTimeoutFnOptions
  • Return Type: UseTimeoutFnReturn<CallbackFn>
  • Calls:
  • shallowRef (from vue)
  • clearTimeout
  • clear
  • cb
  • setTimeout
  • toValue (from vue)
  • start
  • tryOnScopeDispose (from ../tryOnScopeDispose)
  • shallowReadonly (from vue)

clear(): void

Code 
function clear() {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
  }
  • Return Type: void
  • Calls:
  • clearTimeout

stop(): void

Code 
function stop() {
    isPending.value = false
    clear()
  }
  • Return Type: void
  • Calls:
  • clear

start(args: Parameters<CallbackFn> | []): void

Code 
function start(...args: Parameters<CallbackFn> | []) {
    if (immediateCallback)
      cb()
    clear()
    isPending.value = true
    timer = setTimeout(() => {
      isPending.value = false
      timer = null

      cb(...args)
    }, toValue(interval))
  }
  • Parameters:
  • args: Parameters<CallbackFn> | []
  • Return Type: void
  • Calls:
  • cb
  • clear
  • setTimeout
  • toValue (from vue)

Interfaces

UseTimeoutFnOptions

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

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

Properties

Name Type Optional Description
immediate boolean ✓
immediateCallback boolean ✓

Type Aliases

UseTimeoutFnReturn<CallbackFn extends AnyFn extends AnyFn>

type UseTimeoutFnReturn<CallbackFn extends AnyFn extends AnyFn> = Stoppable<Parameters<CallbackFn> | []>;