Как сделать что таймер не сбрасывался а продолжал работать?

Question

[supkiler]

когда переключаюсь по вкладкам таймер сбрасывается , как это можно исправить ?

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './Task.css';

export default class Task extends Component {
  state = {
    min: this.props.minValue,
    sec: this.props.secValue,
    isCounting: false,
  };

  static defaultProps = {
    description: 'Имя не задано',
    checked: false,
    timeAfterCreate: () => {},
    onEditClick: () => {},
    onDeletedClick: () => {},
    onCheckBoxClick: () => {},
  };

  static propTypes = {
    checked: PropTypes.bool,
    onCheckBoxClick: PropTypes.func,
    description: PropTypes.string,
    timeAfterCreate: PropTypes.string,
    onEditClick: PropTypes.func,
    onDeletedClick: PropTypes.func,
  };

  componentWillUnmount() {
    clearInterval(this.counterID);
  }

  minDecrement = () => {
    const { min } = this.state;
    this.setState({
      min: min - 1,
      sec: 59,
    });
  };

  secDecrement = () => {
    const { min, sec, isCounting } = this.state;
    const { onCheckBoxClick } = this.props;

    if (min === 0 && sec === 0 && isCounting === true) {
      onCheckBoxClick();
      clearInterval(this.counterID);
      this.setState({
        isCounting: false,
      });
    }
    if (sec > 0) {
      this.setState({
        sec: sec - 1,
        isCounting: true,
      });
    } else {
      this.minDecrement();
    }
  };

  handlePause = (event) => {
    event.stopPropagation();
    this.setState({ isCounting: false });
    clearInterval(this.counterID);
  };

  handleStart = (event) => {
    event.stopPropagation();
    this.setState({ isCounting: true });
    this.counterID = setInterval(() => {
      this.secDecrement();
    }, 1000);

  };

  render() {
    const { onCheckBoxClick, description, timeAfterCreate, onEditClick, onDeletedClick, checked } = this.props;
    const { min, sec, isCounting } = this.state;
    const buttonTimer = !isCounting ? (
      
      <button type="button" className="icon icon-play" onClick={this.handleStart} />
    ) : (
      
      <button type="button" className="icon icon-pause" onClick={this.handlePause} />
    );
    return (
      <div className="view">
        <input className="toggle" type="checkbox" readOnly onClick={onCheckBoxClick} checked={checked} />

        <div className="label">
          <span role="presentation" className="title" onClick={onCheckBoxClick}>
            {description}
          </span>
          <span className="description">
            {buttonTimer}
            <span className="description__time-value">
              {min}:{sec}
            </span>
          </span>
          <span className="created">created {timeAfterCreate} ago</span>
        </div>
        <button type="button" className="icon icon-edit" onClick={onEditClick} aria-label="log out" />
        <button type="button" className="icon icon-destroy" onClick={onDeletedClick} aria-label="log out" />
      </div>
    );
  }
}

Comments

[Егор Живагин]

Между вкладками браузера? Хранить данные в cookies/sessionStorage/localStorage

[supkiler]

Егор Живагин, нет , не вкладками браузера , на самой странице есть вкладки , когда поним переключаюсь таймер сбрасывается

[supkiler]

Егор Живагин, есть три вкладки, все активные и выполненые , когда по ним переключаюсь таймер сбрасывается

[Aetae]

supkiler, когда ты "переключаешь вкладки" на самом деле все компоненты предыдущей вкладки разрушаются, а все компоненты новой - рисуются на их месте.
Тебе надо либо изменить механизм отрисовки вкладок с физического уничтожения по if на скрытие о display:none, либо хранить таймеры отдельно от компонентов, например используя контекст.

[supkiler]

https://github.com/StasZ2023/todo-list-time а где это указать чтоб блоки скрывались ?

Answer 1

[Zhuk]

я не спец на реакте, больше во vue разбираюсь
но тут 2 варианта либо localStorage, либо date.now()

первый вариант сложно расписать, поэтому извини)

но второй я использовал примерно вот так

handleStart = (event) => {
  event?.stopPropagation();
  const startTime = Date.now();
  const { min, sec } = this.state;
  this.setState({ 
    isCounting: true, 
    startTime,
    remainingTime: min * 60 + sec 
  });

  this.counterID = setInterval(() => {
    const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
    const remainingTime = Math.max(0, this.state.remainingTime - elapsedTime);
    const newMin = Math.floor(remainingTime / 60);
    const newSec = remainingTime % 60;

    this.setState({ min: newMin, sec: newSec });
    
    if (remainingTime === 0) {
      this.handlePause();
      this.props.onCheckBoxClick();
    }
  }, 1000);
};

Не забудь очищать, не помню как в реакте точно это называлось componentwillUnmount что-ли ()=>{clearInterval(this.counterIdD)}

Comments

[supkiler]

Вставил этот код , все равно таймер сбрасывается когда переключаюсь по вкладкам на странице

[supkiler]

ссылка на мое приложение https://github.com/StasZ2023/todo-list-time , когда переключаюсь по вкладкам на странице таймер сбрасывается , должно быть примерно так https://todo-with-hooks-phi.vercel.app/