计时器

计时器组件

import { useEffect, useState } from "react"

export default function SetTime(props){
    const initialCount=props.counts?props.counts:0
    const [time,setTime]=useState(initialCount)
    const [isActive,setIsActive]=useState(false)
    function onButtonClick(){
        setTime(initialCount)
        setIsActive(true)
    }
    useEffect(()=>{
        if(time>0&&isActive){
            setTimeout(()=>{
                setTime(time-1)
            },1000)
        }
        if(time===0){
            setIsActive(false)
        }
    },[time,isActive])
    return(
        <div>
            <button onClick={onButtonClick}>start</button>
            <div>{time}</div>
        </div>
    )
    
}

setTimeout 与 setInterval 的区别

一、setTimeout(callback, delay, ...args)

• 功能：在指定的延迟时间 (delay，单位为毫秒) 之后，执行一次指定的回调函数 (callback)。

• 执行次数：仅执行一次。

• 返回值：返回一个正整数作为定时器 ID。这个 ID 可以被传递给 clearTimeout(timerId) 来在回调函数执行之前取消这个定时器。

• 参数：

  • callback: 到期后要执行的函数。
  • delay: 延迟的时间，以毫秒为单位。如果省略或为 0 (或小于某个最小阈值，通常是 4ms 左右，取决于浏览器实现)，回调会尽快执行（在当前同步代码块执行完毕后，通过事件循环机制）。
  • ...args (可选): 传递给回调函数的额外参数。

• 示例：

console.log("开始");

const timerId = setTimeout(() => {
  console.log("延迟 2 秒后执行一次！");
}, 2000);

// 如果需要，可以在 2 秒内取消
// clearTimeout(timerId);

console.log("setTimeout 已设置");

• 适用场景：
  • 延迟执行某个操作（例如，显示一个提示信息几秒钟后自动消失）。
  • 实现防抖 (Debounce) 或节流 (Throttle) 中的延迟执行部分。
  • 执行一个只需要在未来某个时间点发生一次的任务。

二、setInterval(callback, delay, ...args)

• 功能：每隔指定的间隔时间 (delay，单位为毫秒)，就重复执行一次指定的回调函数 (callback)。

• 执行次数：重复执行多次，直到被清除。

• 返回值：返回一个正整数作为间隔定时器 ID。这个 ID 可以被传递给 clearInterval(intervalId) 来停止后续的重复执行。

• 参数：

  • callback: 每个间隔到期后要执行的函数。
  • delay: 执行回调函数之间的时间间隔，以毫秒为单位。
  • ...args (可选): 传递给回调函数的额外参数。

• 示例：

console.log("开始");
let count = 0;

const intervalId = setInterval(() => {
  count++;
  console.log(`每隔 1 秒执行，这是第 ${count} 次。`);
  if (count >= 5) {
    clearInterval(intervalId); // 执行 5 次后停止
    console.log("setInterval 已清除");
  }
}, 1000);

console.log("setInterval 已设置");

• 适用场景：
  • 需要周期性重复执行的任务，如动画的每一帧、时钟更新、轮询服务器检查新数据等。