некорректная работа таймера при закрытой вкладке
У меня есть код таймера написанный на 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;