Skip to content

⬅️ Back to Table of Contents

📄 useTimeoutFn

📊 Analysis Summary

Metric Count
🔧 Functions 4
📦 Imports 9
📐 Interfaces 1
📑 Type Aliases 1

📚 Table of Contents

🛠️ File Location:

📂 packages/shared/useTimeoutFn/index.ts

📦 Imports

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

Functions

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

Wrapper for setTimeout with controls.

Parameters:

  • cb any: No description
  • interval any: No description
  • options any: No description
Raw JSDoc 
/**
 * Wrapper for `setTimeout` with controls.
 *
 * @param cb
 * @param interval
 * @param options
 */

Calls:

  • shallowRef (from vue)
  • clearTimeout
  • clear
  • cb
  • setTimeout
  • toValue (from vue)
  • start
  • tryOnScopeDispose (from ../tryOnScopeDispose)
  • shallowReadonly (from vue)
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: TimerHandle

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

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

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

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

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

  tryOnScopeDispose(stop)

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

Internal helpers

Declared inside another function in this file.

clear(): void

Returns: void

Calls:

  • clearTimeout
Code 
function clear() {
    if (timer) {
      clearTimeout(timer)
      timer = undefined
    }
  }

stop(): void

Returns: void

Calls:

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

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

Parameters:

  • args Parameters<CallbackFn> | []

Returns: void

Calls:

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

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

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

Type Aliases

UseTimeoutFnReturn<CallbackFn extends AnyFn>

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

Generated by Syntax Scribe