feat: optional callback for useInterval, useTimeout & useTimestamp (#…

…2240)
vueuse · Sep 26, 2022 · 33dbc9e · 33dbc9e
1 parent 1f6567f
commit 33dbc9e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/packages/core/useTimestamp/index.ts b/packages/core/useTimestamp/index.ts
@@ -32,6 +32,10 @@ export interface UseTimestampOptions<Controls extends boolean> {
    * @default requestAnimationFrame
    */
   interval?: 'requestAnimationFrame' | number
+  /**
+   * Callback on each update
+   */
+  callback?: (timestamp: number) => void
 }
 
 /**
@@ -48,15 +52,22 @@ export function useTimestamp(options: UseTimestampOptions<boolean> = {}) {
     offset = 0,
     immediate = true,
     interval = 'requestAnimationFrame',
+    callback,
   } = options
 
   const ts = ref(timestamp() + offset)
 
   const update = () => ts.value = timestamp() + offset
+  const cb = callback
+    ? () => {
+        update()
+        callback(ts.value)
+      }
+    : update
 
   const controls: Pausable = interval === 'requestAnimationFrame'
-    ? useRafFn(update, { immediate })
-    : useIntervalFn(update, interval, { immediate })
+    ? useRafFn(cb, { immediate })
+    : useIntervalFn(cb, interval, { immediate })
 
   if (exposeControls) {
     return {

diff --git a/packages/shared/useInterval/index.ts b/packages/shared/useInterval/index.ts
@@ -17,6 +17,10 @@ export interface UseIntervalOptions<Controls extends boolean> {
    * @default true
    */
   immediate?: boolean
+  /**
+   * Callback on every interval
+   */
+  callback?: (count: number) => void
 }
 
 /**
@@ -32,10 +36,17 @@ export function useInterval(interval: MaybeComputedRef<number> = 1000, options:
   const {
     controls: exposeControls = false,
     immediate = true,
+    callback,
   } = options
 
   const counter = ref(0)
-  const controls = useIntervalFn(() => counter.value += 1, interval, { immediate })
+  const update = () => counter.value += 1
+  const controls = useIntervalFn(callback
+    ? () => {
+        update()
+        callback(counter.value)
+      }
+    : update, interval, { immediate })
 
   if (exposeControls) {
     return {

diff --git a/packages/shared/useTimeout/index.ts b/packages/shared/useTimeout/index.ts
@@ -2,7 +2,7 @@ import type { ComputedRef } from 'vue-demi'
 import { computed } from 'vue-demi'
 import type { UseTimeoutFnOptions } from '../useTimeoutFn'
 import { useTimeoutFn } from '../useTimeoutFn'
-import type { Stoppable } from '../utils'
+import type { Fn, Stoppable } from '../utils'
 import { noop } from '../utils'
 
 export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutFnOptions {
@@ -12,6 +12,10 @@ export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutF
    * @default false
    */
   controls?: Controls
+  /**
+   * Callback on timeout
+   */
+  callback?: Fn
 }
 
 /**
@@ -26,10 +30,11 @@ export function useTimeout(interval: number, options: UseTimeoutOptions<true>):
 export function useTimeout(interval = 1000, options: UseTimeoutOptions<boolean> = {}) {
   const {
     controls: exposeControls = false,
+    callback,
   } = options
 
   const controls = useTimeoutFn(
-    noop,
+    callback ?? noop,
     interval,
     options,
   )