setTimeout останавливается при переходе на другую вкладку
У меня есть кнопка отправки смс кода для подтверждения номера телефона, при нажатии на эту кнопку вызывается метод отправки смс, в ответе нам возвращается время, оставшееся для повторной отправки смс кода, на кнопке отображается таймер обратного отсчёта, который реализован с помощью setTimeout
Проблема: При переходе на другую вкладку, setTimeout замирает и при возврате на вкладку таймер отображается некорректно
const sendSmsToConfirmPhoneNumber = async (model: OnlineVotingModelType) => {
setIsSending(true)
setIsOpenSmsBlock(true)
await sendSmsToConfirmPhoneNumberAPI(model)
.then((res: any) => setTimeMs(res.secondsBeforeNextSent))
// eslint-disable-next-line no-console
.catch(err => console.log(err))
}
useEffect(() => {
if (!timeMs) {
setIsSending(false)
} else {
setTimeout(() => {
if (timeMs) {
setTimeMs(prevTime => prevTime - 1)
}
}, 1000)
}
}, [timeMs])
Пример моего кода
Вопрос: Есть ли возможность реализовать таймер, который может корректно работать при переключении вкладок?