feat(useInterval): 支持通过 delay 控制

src/react/useInterval.test.ts

@@ -1,9 +1,11 @@
+import { act } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
 import { useInterval } from './useInterval'
+import { useState } from 'react'
 import { wait } from '../utils'
 
 describe('useInterval', () => {
-  test('表现正常', async () => {
+  test('通过 stop/start 控制', async () => {
     let i = 0
     const { result } = renderHook(() => useInterval(() => i++, 20))
     expect(result.current[0]).toBe(0)
@@ -17,4 +19,23 @@ describe('useInterval', () => {
     await wait(20)
     expect(result.current[0]).toBe(3)
   })
+
+  test('通过 delay 控制', async () => {
+    let i = 0
+    const { result, waitForNextUpdate } = renderHook(() => {
+      const [delay, setDelay] = useState<any>(20)
+      return { interval: useInterval(() => i++, delay), setDelay }
+    })
+    expect(result.current.interval[0]).toBe(0)
+    await wait(20)
+    expect(result.current.interval[0]).toBe(1)
+    act(() => result.current.setDelay(false))
+    await wait(40)
+    expect(result.current.interval[0]).toBe(1)
+    act(() => result.current.setDelay(20))
+    await waitForNextUpdate()
+    expect(result.current.interval[0]).toBe(2)
+    await wait(20)
+    expect(result.current.interval[0]).toBe(3)
+  })
 })

src/react/useInterval.ts

@@ -2,22 +2,28 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useLatest } from 'react-use'
 
 export type UseIntervalResult<TResult> = [
-  TResult,
+  TResult | undefined,
   {
     start: () => void
     stop: () => void
   },
 ]
 
+/**
+ * 以一定的间隔时间重复调用某函数，并返回调用结果。
+ *
+ * @param callback 回调函数
+ * @param delay 间隔时间（毫秒），非数字时将不调用或停止调用函数
+ * @returns 返回调用结果
+ */
 export function useInterval<TResult>(
   callback: () => TResult,
-  delay: number,
+  delay: any,
 ): UseIntervalResult<TResult> {
-  const [result, setResult] = useState<TResult>(callback)
+  const [result, setResult] = useState<TResult>()
   const latestCallback = useLatest(callback)
   const latestDelay = useLatest(delay)
   const interval = useRef<any>()
-  const isFirst = useRef<boolean>(true)
 
   const stop = useCallback(() => {
     if (interval.current) {
@@ -27,25 +33,18 @@ export function useInterval<TResult>(
 
   const start = useCallback(() => {
     stop()
-    if (!isFirst.current) {
+    if (typeof latestDelay.current === 'number') {
       setResult(latestCallback.current())
+      interval.current = setInterval(() => {
+        setResult(latestCallback.current())
+      }, latestDelay.current)
     }
-    interval.current = setInterval(() => {
-      setResult(latestCallback.current())
-    }, latestDelay.current)
   }, [])
 
   useEffect(() => {
     start()
     return stop
   }, [delay])
 
-  useEffect(() => {
-    isFirst.current = false
-    return () => {
-      isFirst.current = true
-    }
-  }, [])
-
   return [result, { start, stop }]
 }