Почему сброс таймера задерживается в моем приложении? Начальный запуск составляет 20 секунд, но каждый сброс таймера начинается с 0, а затем с 19

#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.