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])

Пример моего кода

Вопрос: Есть ли возможность реализовать таймер, который может корректно работать при переключении вкладок?


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