feat(useInterval): 支持 duration

src/react/useInterval.test.ts

@@ -1,5 +1,4 @@
-import { act } from '@testing-library/react'
-import { renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react-hooks'
 import { useInterval } from './useInterval'
 import { useState } from 'react'
 import { wait } from '../utils'
@@ -22,7 +21,7 @@ describe('useInterval', () => {
 
   test('通过 delay 控制', async () => {
     let i = 0
-    const { result, waitForNextUpdate } = renderHook(() => {
+    const { result } = renderHook(() => {
       const [delay, setDelay] = useState<any>(20)
       return { interval: useInterval(() => i++, delay), setDelay }
     })
@@ -33,9 +32,32 @@ describe('useInterval', () => {
     await wait(40)
     expect(result.current.interval[0]).toBe(1)
     act(() => result.current.setDelay(20))
-    await waitForNextUpdate()
+    await wait(0)
     expect(result.current.interval[0]).toBe(2)
     await wait(20)
     expect(result.current.interval[0]).toBe(3)
   })
+
+  test('支持 duration', async () => {
+    let i = 0
+    renderHook(() => {
+      return useInterval(() => i++, 10, 21)
+    })
+    await wait(50)
+    expect(i).toBe(2)
+  })
+
+  test('支持 start 设置 delay, duration', async () => {
+    let i = 0
+    const { result } = renderHook(() => {
+      return useInterval(() => i++, null)[1]
+    })
+    expect(i).toBe(0)
+    act(() => result.current.start(10, 42))
+    expect(i).toBe(1)
+    await wait(12)
+    expect(i).toBe(2)
+    await wait(60)
+    expect(i).toBe(4)
+  })
 })

src/react/useInterval.ts

@@ -4,7 +4,7 @@ import { useLatest } from 'react-use'
 export type UseIntervalResult<TResult> = [
   TResult | undefined,
   {
-    start: () => void
+    start: (delay?: number, duration?: number) => void
     stop: () => void
   },
 ]
@@ -14,15 +14,18 @@ export type UseIntervalResult<TResult> = [
  *
  * @param callback 回调函数
  * @param delay 间隔时间（毫秒），非数字时将不调用或停止调用函数
+ * @param duration 持续时间（毫秒）
  * @returns 返回调用结果
  */
 export function useInterval<TResult>(
   callback: () => TResult,
   delay: any,
+  duration?: number,
 ): UseIntervalResult<TResult> {
   const [result, setResult] = useState<TResult>()
   const latestCallback = useLatest(callback)
   const latestDelay = useLatest(delay)
+  const latestDuration = useLatest(duration)
   const interval = useRef<any>()
 
   const stop = useCallback(() => {
@@ -31,13 +34,20 @@ export function useInterval<TResult>(
     }
   }, [])
 
-  const start = useCallback(() => {
+  const start = useCallback((delay?: number, duration?: number) => {
     stop()
-    if (typeof latestDelay.current === 'number') {
+    delay = delay ?? latestDelay.current
+    duration = duration ?? latestDuration.current
+    if (typeof delay === 'number') {
       setResult(latestCallback.current())
       interval.current = setInterval(() => {
         setResult(latestCallback.current())
-      }, latestDelay.current)
+      }, delay)
+    }
+    if (typeof duration === 'number') {
+      setTimeout(() => {
+        stop()
+      }, duration)
     }
   }, [])