некорректная работа таймера при закрытой вкладке

У меня есть код таймера написанный на React, который исправно работает при открытой вкладке браузера, но при свёртывании вкладки браузера таймер начинает работать медленнее в связи с оптимизацией браузера. Как можно исправить эту проблему через изменение кода?

Может стоит воспользоваться сторонними технологиями либо изменить сам таймер?

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

const CountdownTimer = ({
  initialMinutes,
  initialSeconds,
  isRunning,
  timerNotification,
  audioNotificaton,
  finishNotification,
  restart,
  isRestartOn,
}) => {
  const [remainingTime, setRemainingTime] = useState(
    initialMinutes * 60 + initialSeconds
  );

  // Уведомление об одной минуте на таймере
  const oneMinNotification = () => {
    const oneMin = new Audio(audioNotificaton);
    console.log("1 min");
    oneMin.play();
    return;
  };

  // Уведомление об одной завершении таймера
  const finishTimerNotification = () => {
    const end = new Audio(finishNotification);
    console.log("finish");
    end.play();
    return;
  };

  useEffect(() => {
    const minutes = Math.floor(remainingTime / 60);
    const seconds = remainingTime % 60;

    // Уведомление о окончании таймера
    if (minutes === 0 && seconds === 0) {
      finishTimerNotification();
    }

    // Срабатывает если таймер завершился и активирован тумблер 'повторный таймер'
    if (minutes === 0 && seconds === 0 && restart && isRestartOn) {
      console.log("Restart");
      setRemainingTime(initialMinutes * 60 + initialSeconds); // Сброс времени на начальные значения
    }

    // Останавливает таймер при окончании времени
    if (!isRunning || remainingTime <= 0) return;

    // Уведомление о тайминге
    if (minutes === timerNotification[0] && seconds === timerNotification[1]) {
      oneMinNotification();
    }

    const intervalId = setInterval(() => {
      setRemainingTime((prevTime) => prevTime - 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [
    isRunning,
    remainingTime,
    initialMinutes,
    initialSeconds,
    restart,
    isRestartOn,
    timerNotification,
  ]);

  const minutes = Math.floor(remainingTime / 60);
  const seconds = remainingTime % 60;

  return (
    <div>
      <p>
        {String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}
      </p>
    </div>
  );
};

export default CountdownTimer;



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