fix: use-interval no clear func (#222)

* fix: use-interval no clear func

* chore: github ci

* chore: script command

Author: NelsonYong

.github/workflows/ci.yml

@@ -32,6 +32,10 @@ jobs:
       - name: Build Lib
         run: |
           pnpm build
+      - name: Build Docs plugin
+        run: |
+          cd packages/vitepress/vitepress-demo-block
+          pnpm run build
       - name: Build Docs
         run: |
           cd packages/hooks

package.json

@@ -4,10 +4,11 @@
   "private": true,
 	"scripts": {
     "bootstrap": "tsx scripts/bootstrap.ts",
-    "docs:dev":"tsx scripts/docs.ts dev",
-    "docs:build":"tsx scripts/docs.ts build",
-    "docs:build-github":"tsx scripts/gitPage.ts github",
-    "docs:build-gitee":"tsx scripts/gitPage.ts gitee",
+    "build:vitepress-demo-block":"cd packages/vitepress/vitepress-demo-block && pnpm build",
+    "docs:dev":"pnpm build:vitepress-demo-block && tsx scripts/docs.ts dev",
+    "docs:build":"pnpm build:vitepress-demo-block && tsx scripts/docs.ts build",
+    "docs:build-github":"pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts github",
+    "docs:build-gitee":"pnpm build:vitepress-demo-block &&  tsx scripts/gitPage.ts gitee",
     "clean": " rimraf dist lib es",
 		"build": "pnpm bootstrap && tsx scripts/build.ts",
     "test": "vitest",

packages/hooks/src/useInterval/demo/demo.vue

@@ -1,16 +1,27 @@
 <template>
-	<div>
-		{{ valueRef }}
-	</div>
+  <div> value: {{ valueRef }} </div>
+  <vhp-button style="margin-top: 8px;" @click="handleInterval">interval + 1000</vhp-button>
+  <vhp-button style="margin-left: 8px;" @click="resetInterval"> reset interval</vhp-button>
+  <vhp-button style="margin-left: 8px;" @click="clear">clear</vhp-button>
+  <vhp-button style="margin-left: 8px;" @click="restart">restart</vhp-button>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-import { useInterval } from 'vue-hooks-plus'
+  import { useInterval } from 'vue-hooks-plus'
 
-const valueRef = ref(0)
-useInterval(() => {
-	valueRef.value += 1
-}, 2000)
+  const valueRef = ref(0)
+  const intervalRef = ref(2000)
+  const { clear, restart } = useInterval(() => {
+    valueRef.value += 1
+  }, intervalRef)
+
+  const handleInterval = () => {
+    intervalRef.value += 1000
+  }
+
+  const resetInterval = () => {
+    intervalRef.value = 2000
+  }
 </script>

packages/hooks/src/useInterval/index.en-US.md

@@ -41,6 +41,7 @@ useInterval(
 
 ## Result
 
-| Property      | Description    | Type         |
-| ------------- | -------------- | ------------ |
-| clearInterval | clear interval | `() => void` |
+| Property | Description      | Type         |
+| -------- | ---------------- | ------------ |
+| clear    | clear interval   | `() => void` |
+| restart  | restart interval | `() => void` |

packages/hooks/src/useInterval/index.ts

@@ -16,28 +16,59 @@ function useInterval(
      */
     immediate?: boolean
   },
-): void {
+): {
+  /**
+   * Clear the interval timer.
+   */
+  clear: VoidFunction
+  /**
+   * Restart the interval timer.
+   */
+  restart: VoidFunction
+} {
   const immediate = options?.immediate
 
   const fnRef = ref(fn)
 
-  watchEffect(onInvalidate => {
+  const timerRef = ref<ReturnType<typeof setInterval> | null>(null)
+
+  const setupInterval = () => {
     if (isRef(delay)) {
       if (typeof delay.value !== 'number' || delay.value < 0) return
     } else {
       if (typeof delay !== 'number' || delay < 0) return
     }
+
     if (immediate) {
       fnRef.value()
     }
+
     const _deply = unref(delay)
-    const timer = setInterval(() => {
+    timerRef.value = setInterval(() => {
       fnRef.value()
     }, _deply)
-    onInvalidate(() => {
-      clearInterval(timer)
-    })
+  }
+
+  const clear = () => {
+    if (timerRef.value) {
+      clearInterval(timerRef.value)
+    }
+  }
+
+  const restart = () => {
+    clear()
+    setupInterval()
+  }
+
+  watchEffect(onInvalidate => {
+    setupInterval()
+    onInvalidate(clear)
   })
+
+  return {
+    clear,
+    restart,
+  }
 }
 
 export default useInterval

packages/hooks/src/useInterval/index.zh-CN.md

@@ -41,6 +41,7 @@ useInterval(
 
 ## Result
 
-| 参数          | 说明       | 类型         |
-| ------------- | ---------- | ------------ |
-| clearInterval | 清除定时器 | `() => void` |
+| 参数    | 说明           | 类型         |
+| ------- | -------------- | ------------ |
+| clear   | 清除定时器     | `() => void` |
+| restart | 重新启动定时器 | `() => void` |