feat: add useDebounceFn

src/index.ts

@@ -17,3 +17,4 @@ export * from './useHistory'
 export * from './useTimeout'
 export * from './useTimeoutFn'
 export * from './useDebounce'
+export * from './useDebounceFn'

src/useDebounceFn.ts

@@ -0,0 +1,13 @@
+import { watch } from 'vue'
+import { useDebounce } from './useDebounce'
+
+export function useDebounceFn(fn: Function, delay = 200) {
+  const debounceValue = useDebounce(0, delay)
+
+  watch(debounceValue, () => {
+    fn()
+  })
+  return () => {
+    debounceValue.value++
+  }
+}

tests/useDebounceFn.test.ts

@@ -0,0 +1,43 @@
+import { nextTick } from 'vue'
+import { useDebounceFn } from '../src/useDebounceFn'
+
+let callback: Function | null
+
+beforeEach(() => {
+  jest.useFakeTimers()
+  callback = jest.fn()
+})
+
+afterEach(() => {
+  jest.useRealTimers()
+  jest.clearAllMocks()
+})
+
+test('callback should not be called after invoking useDebounceFn', () => {
+  useDebounceFn(callback!)
+  expect(callback!).not.toBeCalled()
+})
+
+test('setTimeout should be called after invoking the function returned by useDebounceFn', () => {
+  const debounceFn = useDebounceFn(callback!)
+  debounceFn()
+  expect(setTimeout).toHaveBeenCalledTimes(1)
+  expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 200)
+})
+
+test('timer should be cleared when calling the function returned by useDebounceFn in 200s', () => {
+  const debounceFn = useDebounceFn(callback!)
+  debounceFn()
+  debounceFn()
+  expect(clearTimeout).toHaveBeenCalledTimes(1)
+  expect(setTimeout).toHaveBeenCalledTimes(2)
+  expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 200)
+})
+
+test('callback should be called when timeout', async () => {
+  const debounceFn = useDebounceFn(callback!)
+  debounceFn()
+  jest.advanceTimersByTime(200)
+  await nextTick()
+  expect(callback!).toHaveBeenCalledTimes(1)
+})