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

Question

Венедикт

javascript , react

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

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

3 декабря 2024 г. 14:03

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы настроить таймер, который не будет сбрасываться при переключении между вкладками, вы можете использовать JavaScript с использованием `setInterval` или `setTimeout`. Однако, чтобы избежать проблемы со сбросом таймера при переключении вкладок, вы можете использовать `localStorage` или `sessionStorage` для хранения состояния таймера.

Вот пример решения с использованием `localStorage`, которое позволит таймеру сохранять своё состояние даже если вы переключаетесь между вкладками или закрываете браузер:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таймер</title>
</head>
<body>
    <div id="timer">00:00</div>
    <button id="startButton">Запустить таймер</button>
    <button id="stopButton">Остановить таймер</button>
    
    <script>
        let startTime;
        let updatedTime;
        let difference;
        let timerInterval;
        
        function startTimer() {
            if (localStorage.getItem('startTime')) {
                startTime = parseInt(localStorage.getItem('startTime'));
                difference = Math.floor((new Date().getTime() - startTime));
            } else {
                startTime = new Date().getTime();
                localStorage.setItem('startTime', startTime);
            }

            timerInterval = setInterval(() => {
                updatedTime = new Date().getTime();
                difference = updatedTime - startTime;

                // Форматирование времени
                let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
                let seconds = Math.floor((difference % (1000 * 60)) / 1000);
                
                hours = (hours < 10) ? "0" + hours : hours;
                minutes = (minutes < 10) ? "0" + minutes : minutes;
                seconds = (seconds < 10) ? "0" + seconds : seconds;

                document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds;
            }, 1000);
        }

        function stopTimer() {
            clearInterval(timerInterval);
            localStorage.removeItem('startTime'); // Чтобы сбросить таймер, если это вам нужно.
        }

        document.getElementById("startButton").onclick = startTimer;
        document.getElementById("stopButton").onclick = stopTimer;

        // Восстановление таймера при загрузке страницы
        if (localStorage.getItem('startTime')) {
            startTimer();
        }
    </script>
</body>
</html>
```

Этот код создает простой таймер, который сохраняет своё состояние при переключении между вкладками или перезагрузке страницы. Когда вы нажимаете кнопку "Запустить таймер", если таймер уже был запущен, он продолжит отсчет времени с того места, где остановился. При нажатии "Остановить таймер" текущий отсчет времени сбрасывается, и состояние таймера удаляется из `localStorage`.

Answer 2

я не спец на реакте, больше во 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)}