Как начать отсчет таймера при нажатии на кнопку?

Question

Учу React второй день.

Застрял на проблеме как начать отсчет таймера при нажатии на кнопку. Хочу сделать приложение, которое считает клики в секунду. Когда я первый раз нажимаю на кнопку то хочу чтобы таймер начал свою работу, а когда доходит до 5 секунды остановился.

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

const Clicker = () => {
    const [clicks, setClicks] = useState(0);
    const [seconds, setSeconds] = useState(0);
    const [result, setResult] = useState(0)

    function incr() {
        setClicks(clicks + 1);
    }

    useEffect(() => {
        if (seconds < 5) {
            setTimeout(() => setSeconds(seconds + 1), 1000)
        }
    },[seconds])
    
    if (seconds == 5) {
        setResult(clicks / 5)
        setSeconds(0)
        setClicks(0)
    }

    return (
        <div className="Counter">
            <h1 className="title center-text">Clicker</h1>
            <h2 className="subtitle center-text">{seconds}</h2>
            <h2 className="subtitle center-text">{clicks}</h2>
            <div className="buttons">
                <button className="button" onClick={incr}>Click</button>
            </div>
            <div>Result: {result}</div>
        </div>
    );
};

export default Clicker;

помогите, пожалуйста.

Answer 1

Один из вариантов начала и остановки таймера

const Clicker = () => {
  const [clicks, setClicks] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [result, setResult] = useState(0);
  const [timer, setT] = useState(0);

  function incr() {
    setClicks( p => p + 1);
    clearInterval(timer);
    setSeconds(0);
  }

  useEffect(() => {
    if (clicks) {
      const time = setInterval(() => {
        setSeconds(s => s + 1);
      }, 1000);
      setT(time);
    }
  }, [clicks]);

  if (seconds === 5) {
    setResult(clicks / 5)
    setSeconds(0)
    clearInterval(timer);
  }

  return (
    <div className="Counter">
      <h1 className="title center-text">Clicker</h1>
      <h2 className="subtitle center-text">{seconds}</h2>
      <h2 className="subtitle center-text">{clicks}</h2>
      <div className="buttons">
        <button className="button" onClick={() => incr()}>Click</button>
      </div>
      <div>Result: {result}</div>
    </div>
  );
};

БЛОГ НА HUSL

Как начать отсчет таймера при нажатии на кнопку?

Ответы (1 шт):