feat: add useTimeoutFn

src/index.ts

@@ -15,3 +15,4 @@ export * from './useInterval'
 export * from './useHash'
 export * from './useHistory'
 export * from './useTimeout'
+export * from './useTimeoutFn'

src/useTimeout.ts

@@ -3,11 +3,14 @@ import { ref } from 'vue'
 export function useTimeout(delay = 1000, immediate = true) {
   const ready = ref(false)
   let timer: any
-  const initTimeout = () => {
-    ready.value = false
+  const stop = () => {
     if (timer) {
       clearTimeout(timer)
     }
+  }
+  const initTimeout = () => {
+    ready.value = false
+    stop()
     timer = window.setTimeout(() => {
       ready.value = true
       timer = null
@@ -17,6 +20,7 @@ export function useTimeout(delay = 1000, immediate = true) {
 
   return {
     ready,
-    start: () => initTimeout()
+    start: () => initTimeout(),
+    stop
   }
 }

src/useTimeoutFn.ts

@@ -0,0 +1,24 @@
+import { watch, WatchStopHandle } from 'vue'
+import { useTimeout } from './useTimeout'
+
+export function useTimeoutFn(fn: Function, delay = 1000, immediate = true, clearEffectWhenStop = false) {
+  const { start, ready, stop } = useTimeout(delay, immediate)
+  let stopEffect: WatchStopHandle | undefined
+  const startEffect = () => {
+    stopEffect = watch(ready, (hasReady) => {
+      hasReady && fn()
+    })
+  }
+  const _stop = () => {
+    clearEffectWhenStop && stopEffect!()
+    stop()
+  }
+  startEffect()
+  return {
+    start: () => {
+      clearEffectWhenStop && startEffect()
+      start()
+    },
+    stop: _stop
+  }
+}

tests/useTimeout.test.ts

@@ -1,4 +1,4 @@
-import { useTimeout } from '../src/useTimeout' 
+import { useTimeout } from '../src/useTimeout'
 
 beforeEach(() => {
   jest.useFakeTimers()
@@ -33,3 +33,9 @@ test('setTimeout should be called after calling start when immediate is false',
   jest.advanceTimersByTime(1000)
   expect(ready.value).toBeTruthy()
 })
+
+test('setTimeout should be clear after calling stop', () => {
+  const { stop } = useTimeout()
+  stop()
+  expect(clearTimeout).toHaveBeenCalledTimes(1)
+})

tests/useTimeoutFn.test.ts

@@ -0,0 +1,55 @@
+import { useTimeoutFn } from '../src/useTimeoutFn'
+import { nextTick } from 'vue'
+
+let callback: Function | undefined
+
+beforeEach(() => {
+  callback = jest.fn()
+  jest.useFakeTimers()
+})
+
+afterEach(() => {
+  jest.clearAllTimers()
+  jest.clearAllMocks()
+})
+
+test('setTimeout should be called with default delay', async () => {
+  useTimeoutFn(callback!)
+  expect(setTimeout).toHaveBeenCalledTimes(1)
+  expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 1000)
+  jest.advanceTimersByTime(1000)
+  await nextTick()
+  expect(callback!).toHaveBeenCalledTimes(1)
+})
+
+test('setTimeout should not be called when immediate is set to false', () => {
+  useTimeoutFn(callback!, 1000, false)
+  expect(setTimeout).not.toBeCalled()
+})
+
+test('setTimeout should be called after calling start when immediate is false', async () => {
+  const { start } = useTimeoutFn(callback!, 1000, false)
+  expect(setTimeout).not.toBeCalled()
+  start()
+  expect(setTimeout).toHaveBeenCalledTimes(1)
+  expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 1000)
+  jest.advanceTimersByTime(1000)
+  await nextTick()
+  expect(callback!).toHaveBeenCalledTimes(1)
+})
+
+test('setTimeout should be clear after calling stop', () => {
+  const { stop } = useTimeoutFn(callback!, 1000)
+  stop()
+  expect(clearTimeout).toHaveBeenCalledTimes(1)
+})
+
+test('callback should be called 1 time when clearEffectWhenStop is true and calling start after calling stop', async () => {
+  const { start, stop } = useTimeoutFn(callback!, 1000, true, true)
+  stop()
+  expect(clearTimeout).toHaveBeenCalledTimes(1)
+  start()
+  jest.advanceTimersByTime(1000)
+  await nextTick()
+  expect(callback!).toHaveBeenCalledTimes(1)
+})