docs(useTimeoutFn): add docs of useTimeoutFn

docs/.vitepress/components/index.js

@@ -6,6 +6,7 @@ const UseEventRef = defineAsyncComponent(() => import('./useEventRef.vue'))
 const UseInterval = defineAsyncComponent(() => import('./useInterval.vue'))
 const UseLifecycles = defineAsyncComponent(() => import('./useLifecycles.vue'))
 const UseTimeout = defineAsyncComponent(() => import('./useTimeout.vue'))
+const UseTimeoutFn = defineAsyncComponent(() => import('./useTimeoutFn.vue'))
 const UseTitle = defineAsyncComponent(() => import('./useTitle.vue'))
 const UseToggle = defineAsyncComponent(() => import('./useToggle.vue'))
 
@@ -16,6 +17,7 @@ export default function registerComponent(app) {
   app.component('UseInterval', UseInterval)
   app.component('UseLifecycles', UseLifecycles)
   app.component('UseTimeout', UseTimeout)
+  app.component('UseTimeoutFn', UseTimeoutFn)
   app.component('UseTitle', UseTitle)
   app.component('UseToggle', UseToggle)
 }

docs/.vitepress/components/useTimeoutFn.vue

@@ -0,0 +1,25 @@
+<template>
+  <p>Is callback executed?: {{executed}}</p>
+  <button @click="start">restart</button>
+  <button @click="stop">stop</button>
+</template>
+<script>
+  import { ref } from 'vue'
+  import {useTimeoutFn} from 'v3hook'
+  export default {
+    setup () {
+      const executed = ref(false)
+      const { start, stop } = useTimeoutFn(() => {
+        executed.value = true
+      })
+      return {
+        executed,
+        start: () => {
+          executed.value = false
+          start()
+        },
+        stop
+      }
+    }
+  }
+</script>

docs/.vitepress/config.js

@@ -49,6 +49,7 @@ const config = {
             children: [
               {text: 'useInterval', link: '/effects/useInterval'},
               {text: 'useTimeout', link: '/effects/useTimeout'},
+              {text: 'useTimeoutFn', link: '/effects/useTimeoutFn'},
             ]
           }
         ]

docs/effects/useTimeoutFn.md

@@ -0,0 +1,78 @@
+# ``useTimeoutFn``
+
+---
+
+
+
+用于在一段时间后执行回调
+
+
+
+## API
+
+
+
+```typescript
+const { start, stop } = useTimeoutFn(fn, delay, immediate, clearEffectWhenStop)
+```
+
+
+
+## Params
+
+| 参数名              | 描述                                          | 类型     | 默认值 |
+| ------------------- | --------------------------------------------- | -------- | ------ |
+| fn                  | 回调                                          | Function |        |
+| delay               | 定时时间                                      | number   |        |
+| immediate           | 是否立即注册定时器                            | boolen   | true   |
+| clearEffectWhenStop | 调用 ``stop`` 时是否停止内部的 ``watch`` 监听 | boolean  | false  |
+
+
+
+## Result
+
+| 参数名 | 描述            | 类型       |
+| ------ | --------------- | ---------- |
+| start  | 开启/重启定时器 | () => void |
+| Stop   | 停止定时器      | () => void |
+
+
+
+## Example
+
+
+
+<UseTimeoutFn/>
+
+
+
+## Code
+
+```vue
+<template>
+  <p>Is callback executed?: {{executed}}</p>
+  <button @click="start">restart</button>
+  <button @click="stop">stop</button>
+</template>
+<script>
+  import { ref } from 'vue'
+  import {useTimeoutFn} from 'v3hook'
+  export default {
+    setup () {
+      const executed = ref(false)
+      const { start, stop } = useTimeoutFn(() => {
+        executed.value = true
+      })
+      return {
+        executed,
+        start: () => {
+          executed.value = false
+          start()
+        },
+        stop
+      }
+    }
+  }
+</script>
+```
+