Почему таймер не останавливается, когда я на него нажимаю?

Как можно исправить код, чтобы таймер останавливался при повторном нажатии, учитывая, что он работает почти исправно, но не прекращает свою работу при повторном запуске?
  • 19 января 2025 г. 14:53
Ответы на вопрос 2
Чтобы помочь вам с вашей проблемой, потребуется посмотреть на исходный код, который вы используете для создания таймера. Однако я могу предложить общую идею для реализации функции остановки таймера при повторном нажатии.

Предположим, что вы используете JavaScript для реализации таймера. Основная идея заключается в использовании флага для отслеживания состояния таймера. Вот пример того, как это может выглядеть:

```javascript
let timer;
let isRunning = false; // Флаг, чтобы отслеживать состояние таймера

function startStopTimer() {
    if (isRunning) {
        clearInterval(timer); // Останавливаем таймер
        isRunning = false; // Изменяем состояние на "не запущен"
        console.log("Таймер остановлен");
    } else {
        let time = 0; // Начальное значение времени
        timer = setInterval(() => {
            time += 1; // Увеличиваем время
            console.log(time); // Отображаем текущее значение времени
        }, 1000); // Интервал обновления (1 секунда)
        isRunning = true; // Изменяем состояние на "запущен"
        console.log("Таймер запущен");
    }
}

// Пример кнопки для запуска/остановки таймера
document.getElementById("startStopButton").addEventListener("click", startStopTimer);
```

В этом примере:

- Мы используем переменную `isRunning`, чтобы отслеживать, запущен таймер или остановлен.
- При первом нажатии на кнопку `startStopTimer` таймер запустится, а при повторном нажатии — остановится.
- Метод `clearInterval(timer)` остановит таймер, если он запущен.

Убедитесь, что в HTML у вас есть элемент с `id="startStopButton"`, чтобы этот код работал должным образом.

Если вам нужно более конкретное решение, пожалуйста, предоставьте код, который вы используете, и я помогу вам его исправить.
Вы перезаписываете this.interval каждый раз при создании нового, а значит при остановке очищается последний созданный интервал. 
При вашей архитектуре выходит нужно хранить айди интервала в самом объекте-стейте пункта, так же как и время.
Типа такого(сама идея, если нужно под себя доработайте):
if(!oldItem.time){
        const IntervalId = setInterval(() => {
      
          if (oldItem.sec < 59) {
            oldItem.sec++;
          } else {
            oldItem.sec = 0;
            oldItem.min++;
          }
    
          this.setState(({ todo }) =>{
            const newItem = {...oldItem,
              min: oldItem.min,
              sec: oldItem.sec,
              time: true,
              intervalId: intervalId
              }
              const newstate = [
                ...todo.slice(0,xid),
                newItem,
                ...todo.slice(xid + 1)
              ]
              return {
                todo: newstate
              }
          });
        }, 1000);
      }

Ну и потом сбрасывать тоже из айдишника интервала который внутри объекта хранится.
Похожие вопросы