计时器

React 实现定时器

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [intervalId, setIntervalId] = useState(null);

  useEffect(() => {
    let interval;
    if (isRunning) {
      interval = setInterval(() => {
        setTime(prevTime => prevTime + 1);
      }, 1000);
      setIntervalId(interval);
    } else {
      clearInterval(intervalId);
    }

    return () => clearInterval(interval);
  }, [isRunning]);

  const handleStart = () => {
    setIsRunning(true);
  };

  const handlePause = () => {
    setIsRunning(false);
  };

  const handleReset = () => {
    setTime(0);
    setIsRunning(false);
  };

  return (
    <div>
      <h1>Time: {time} seconds</h1>
      <div>
        <button onClick={handleStart}>Start</button>
        <button onClick={handlePause}>Pause</button>
        <button onClick={handleReset}>Reset</button>
      </div>
    </div>
  );
}

export default Timer;

页面上显示一个计数及一个按钮，点击按钮计数 +1，在 5 秒内没有再次点击时，计数清零

function Counter() {
  const [count, setCount] = useState(0);
  const [timer, setTimer] = useState(null);
  const handleClick = () => {
    clearTimeout(timer);
    setCount(count + 1);
    setTimer(setTimeout(() => setCount(0), 5000));
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}