#reactjs
Вопрос:
Я пытаюсь создать приложение для викторины, и моя проблема в том, что всякий раз, когда заканчивается время, новый таймер начинается с 0 после повторного рендеринга и переходит на 19 вместо 20.
Я сделал стекблитц с минимальным необходимым кодом, чтобы продемонстрировать свою проблему.
Это правильно работает в моем приложении, если я нажимаю на ответ, и он начинается с 20 секунд. Это происходит только тогда, когда я даю таймеру закончиться. Методы сброса таймера одинаковы в обоих случаях, когда кто-то нажимает на ответ в полном приложении, в нем есть только некоторые дополнительные функции, например, получение новых вопросов.
Ответ №1:
Хорошо, я только что изменил первый эффект использования. Я вижу, что здесь две вещи не так. У setInterval
этого есть 19 в качестве тайм-аута. Это должно быть 20, потому что это именно те миллисекунды, которые вам нужны для выполнения этого интервала.
И во-вторых, вы проверяете, будет ли timerWidth > 100
он отмечен только в том случае, если значение превышает 100. Но в вашем случае вы должны сбросить таймер только тогда, когда ширина таймера равна 100. Так что перемены timerWidth >= 100
сработают.
Вот эффект использования с изменениями
useEffect(() => {
if (answer === null amp;amp; timerWidth < 100.1) {
timerRef.current = setInterval(() => {
setTimerWidth(timerWidth 0.1);
if (timerWidth >= 100) {
setTimerWidth(0);
setSecondsRemaining(20);
}
}, 20);
}
Простите, если объяснение не настолько хорошее. Я не являюсь носителем английского языка. Если кто-нибудь может объяснить лучше, пожалуйста, продолжайте.
Комментарии:
1. Ну, во-первых, спасибо за ваш ответ, изменение ширины таймера >= 100 исправило проблему с задержкой сброса обратного отсчета. Однако с частотой setinterval я изначально использовал 20 мс, но я заметил, что на самом деле каждый раз требуется 21 секунда с разницей в несколько мс, чтобы заполнить полосу до 100, хотя математика говорит, что мне понадобится 20 мс, чтобы заполнить полосу шириной 100% с шагом 0,1%. Поэтому я повозился и увеличил частоту на 5%, что составляет 19 вместо 20, и это на самом деле заставило таймер работать на 5% быстрее, и это очень близко к 20 секундам с интервалами 19 мс. Следовательно, 19 мс setinterval.