⬅️ Back to Table of Contents

📄 refThrottled

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	5
📊 Variables & Constants	2
🟢 Vue Composition API	1
📑 Type Aliases	1

📚 Table of Contents

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

🛠️ File Location:

📂 packages/shared/refThrottled/index.ts

📦 Imports

Name	Source
Ref	vue
deepRef	vue
toValue	vue
watch	vue
useThrottleFn	../useThrottleFn

---

Variables & Constants

Name	Type	Kind	Value	Exported
throttledRef	<T = any>(value: Ref<T>, delay?: numb...	const	refThrottled	✓
useThrottle	<T = any>(value: Ref<T>, delay?: numb...	const	refThrottled	✓

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

refThrottled(value: Ref<T>, delay: number, trailing: boolean, leading: boolean): RefThrottledReturn<T>

Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.

Parameters:

• value any: Ref value to be watched with throttle effect
• delay any: A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
• trailing any: if true, update the value again after the delay time is up
• leading any: if true, update the value on the leading edge of the ms timeout

Raw JSDoc

/**
 * Throttle execution of a function. Especially useful for rate limiting
 * execution of handlers on events like resize and scroll.
 *
 * @param value Ref value to be watched with throttle effect
 * @param  delay  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
 * @param trailing if true, update the value again after the delay time is up
 * @param leading if true, update the value on the leading edge of the ms timeout
 */

Calls:

• deepRef (from vue)
• toValue (from vue)
• useThrottleFn (from ../useThrottleFn)
• watch (from vue)
• updater

Code

export function refThrottled<T = any>(value: Ref<T>, delay = 200, trailing = true, leading = true): RefThrottledReturn<T> {
  if (delay <= 0)
    return value

  const throttled = deepRef(toValue(value))

  const updater = useThrottleFn(() => {
    throttled.value = value.value
  }, delay, trailing, leading)

  watch(value, () => updater())

  return throttled as Ref<T>
}

---

Type Aliases

RefThrottledReturn<T = any>

type RefThrottledReturn<T = any> = Ref<T>;

---

Generated by Syntax Scribe