feat(useInterval): support ref as interval (vitest-dev#1215)

chaii3 · Feb 8, 2022 · a2b2b0d · a2b2b0d
1 parent dcc010d
commit a2b2b0d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/shared/useInterval/index.ts b/packages/shared/useInterval/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
-import type { Pausable } from '../utils'
+import type { MaybeRef, Pausable } from '../utils'
 import { useIntervalFn } from '../useIntervalFn'
 
 export interface IntervalOptions<Controls extends boolean> {
@@ -19,9 +19,9 @@ export interface IntervalOptions<Controls extends boolean> {
   immediate?: boolean
 }
 
-export function useInterval(interval?: number, options?: IntervalOptions<false>): Ref<number>
-export function useInterval(interval: number, options: IntervalOptions<true>): { counter: Ref<number> } & Pausable
-export function useInterval(interval = 1000, options: IntervalOptions<boolean> = {}) {
+export function useInterval(interval?: MaybeRef<number>, options?: IntervalOptions<false>): Ref<number>
+export function useInterval(interval: MaybeRef<number>, options: IntervalOptions<true>): { counter: Ref<number> } & Pausable
+export function useInterval(interval: MaybeRef<number> = 1000, options: IntervalOptions<boolean> = {}) {
   const {
     controls: exposeControls = false,
     immediate = true,

diff --git a/packages/shared/useIntervalFn/demo.vue b/packages/shared/useIntervalFn/demo.vue
@@ -4,14 +4,19 @@ import { useIntervalFn } from '.'
 
 const greetings = ['Hello', 'Hi', 'Yo!', 'Hey', 'Hola', 'こんにちは', 'Bonjour', 'Salut!', '你好']
 const word = ref('Hello')
+const interval = ref(500)
 
 const { pause, resume, isActive } = useIntervalFn(() => {
   word.value = greetings[Math.round(Math.random() * (greetings.length - 1))]
-}, 500)
+}, interval)
 </script>
 
 <template>
   <p>{{ word }}</p>
+  <p>
+    interval:
+    <input v-model="interval" type="number" placeholder="interval">
+  </p>
   <button v-if="isActive" class="orange" @click="pause">
     Pause
   </button>

diff --git a/packages/shared/useIntervalFn/index.ts b/packages/shared/useIntervalFn/index.ts
@@ -1,6 +1,6 @@
-import { ref } from 'vue-demi'
+import { isRef, ref, unref, watch } from 'vue-demi'
 import { tryOnScopeDispose } from '../tryOnScopeDispose'
-import type { Fn, Pausable } from '../utils'
+import type { Fn, MaybeRef, Pausable } from '../utils'
 import { isClient } from '../utils'
 
 export interface IntervalFnOptions {
@@ -26,7 +26,7 @@ export interface IntervalFnOptions {
  * @param interval
  * @param options
  */
-export function useIntervalFn(cb: Fn, interval = 1000, options: IntervalFnOptions = {}): Pausable {
+export function useIntervalFn(cb: Fn, interval: MaybeRef<number> = 1000, options: IntervalFnOptions = {}): Pausable {
   const {
     immediate = true,
     immediateCallback = false,
@@ -54,12 +54,20 @@ export function useIntervalFn(cb: Fn, interval = 1000, options: IntervalFnOption
     if (immediateCallback)
       cb()
     clean()
-    timer = setInterval(cb, interval)
+    timer = setInterval(cb, unref(interval))
   }
 
   if (immediate && isClient)
     resume()
 
+  if (isRef(interval)) {
+    const stopWatch = watch(interval, () => {
+      if (immediate && isClient)
+        resume()
+    })
+    tryOnScopeDispose(stopWatch)
+  }
+
   tryOnScopeDispose(pause)
 
   return {