feat: 倒计时小数支持 & 边界处理

Author: ceilf6

React/sandboxs/src/App.jsx

@@ -38,11 +38,11 @@ const el = (
 
         {/* <RefLoseControl /> */}
         <Modal>
-            <CountDown time={5}/>
+            <CountDown time={5} interval={600}/>
         </Modal>
 
         <This/>
-        <Num/>
+        {/* <Num/> */}
     </>
 )
 

React/sandboxs/src/pages/CountDown.jsx

@@ -1,30 +1,34 @@
 import React, { useEffect,useState,useRef} from 'react'
 
 export default function(props){
-    const [time,setTime] = useState(props.time)
+    const { time: initialTime, interval = 1000 } = props
+    const [time,setTime] = useState(initialTime)
 
     // 1
     const timerRef = useRef(null)
     useEffect(() => {
         timerRef.current = setInterval(() => {
-            setTime(pre => pre-1)
-        },1000)
+            setTime(pre => pre-interval/1000)
+        }, interval)
         // 提前卸载
         return () => clearInterval(timerRef.current)
-    },[])
+    },[interval])
     useEffect(() => {
-        if(time<=0){
+        const nextTime = time-interval/1000
+        if(nextTime<=0){
             // 倒计时结束卸载
             clearInterval(timerRef.current)
         }
     },[time])
 
     // 2
     useEffect(() => {
-        if (time <= 0) return
-        const id = setTimeout(() => setTime(time-1), 1000)
+        const nextTime = time-interval/1000
+        if (nextTime <= 0) return // 先判断，确保不会显示负的
+        const id = setTimeout(() => setTime(Math.max(0,nextTime)), interval) 
+        // 或者通过 max 确保显示到 0 为止
         return () => clearTimeout(id)  // 清理
-    }, [time])
+    }, [time,interval])
 
     return (
         <div>