Javascript - Приостановка вывода IIFE с функцией setTimeout и отображения мин/сек - Часы Pomodoro

Question

У меня есть две функции, отображающие минуты и секунды. Внутри функций я использую IIFE с setTimeout для вычисления времени. Получив это, я с трудом выясняю, как я могу приостановить отображение, если нажата кнопка паузы.

Таймер работает нормально и отображается правильно.

Я понимаю, что это, вероятно, не очень хороший способ сделать это, но я потратил так много времени (пытаясь узнать, как использовать IIFE), что я не хочу сдаваться. Если мне нужно, я поцарапаю его.

Обновление - этот таймер будет получать информацию от пользователя. Это может быть 25 минут. Я хочу, чтобы он начал отсчет оттуда, пока не достигнет 0, и пользователь сможет приостановить его в любое время.

let convertToSeconds = document.getElementById('timeValue').value * 60; 
    let seconds = 60; 

    function secondsCounter(time) { 
     // let flag = document.getElementById('pauseButton').value; 
     for (let i = seconds; i > 0; i--) { 
      (function(x) { 
       setTimeout(function() { 
        let remaining = seconds - x; 
        document.getElementById('displaySeconds').innerHTML = remaining; 
        console.log(remaining); 
       }, i * 1000); 
      })(i); 
     } 
    } 

    function counter() { 
     for (let i = convertToSeconds; i > 0; i--) { 
      (function(minutes) { 
       setTimeout(function() { 
        let remaining = Math.floor((convertToSeconds - minutes)/60); 
        document.getElementById('displayMinutes').innerHTML = remaining; 
        console.log(remaining); 
       }, i * 1000); 

       setTimeout(function() { 
        secondsCounter(seconds); 
       }, i * 60000); 

      })(i); 
     } 

     secondsCounter(seconds); 

    } 

Я пробовал пару вещей.

1. Использование флага и если заявление вокруг document.getElementById('displaySeconds').innerHTML = remaining; так, если моя кнопка паузы нажата, изменения флага, а другой SetTimeout (10 минут) срабатывают. Не останавливает обратный отсчет DOM, он продолжает двигаться. Я просто хотел увидеть какую-то реакцию, но ничего не произошло. Что-то вроде:

   function secondsCounter(time) { 
       let flag = document.getElementById('pauseButton').value; 
   
       for (let i = seconds; i > 0; i--) { 
        (function(x) { 
         setTimeout(function() { 
          let remaining = seconds - x; 
   
          if (flag === 'yes') { 
           document.getElementById('displaySeconds').innerHTML = remaining; 
           console.log(remaining); 
          } else { 
           setTimeout(function() { 
            console.log(remaining); 
           }, 10000); 
          } 
   
         }, i * 1000); 
        })(i); 
       } 
   } 
   

2. Использование setInterval и clearInterval, что ничего не делать.

Возможно ли это? Не знаете, где еще искать. Спасибо

Answer 1

Вы не можете остановить/приостановить setTimeout или clearTimeout без ссылки на таймер, хранить его и затем вызвать clearTimeout(timer) или clearInterval(timer).

Таким образом, вместо того, чтобы: setTimeout(someFunciton)

Понадобится: timer = setTimeout(someFunciton)

И, в timer переменной потребности быть объявлены в области, которая является доступной для всех функций, которые будут использовать его.

Подробнее см. setTimeout().

Без ссылки на таймер вы не сможете остановить его, и это заставило вас пойти на дикую охоту за гусями для других способов сделать это, что переоценивает то, что вам действительно нужно.

В конце концов, я думаю, у вас должна быть только одна функция, которая выполняет все подсчеты, так что у вас есть только один таймер, о котором можно беспокоиться.

Наконец, вы можете использовать объект JavaScript Date и его get/set часов, минуту и ​​методы секунд, чтобы заботиться о обратном подсчете для вас.

(function() { 
 
     // Ask user for a time to start counting down from. 
 
     var countdown = prompt("How much time do you want to put on the clock? (hh:mm:ss)"); 
 
    
 
     // Take that string and split it into the HH, MM and SS stored in an array 
 
     var countdownArray = countdown.split(":")  
 
    
 
     // Extract the individual pieces of the array and convert to numbers: 
 
     var hh = parseInt(countdownArray[0],10); 
 
     var mm = parseInt(countdownArray[1],10); 
 
     var ss = parseInt(countdownArray[2],10); 
 
    
 
     // Make a new date and set it to the countdown value 
 
     var countdownTime = new Date(); 
 
     countdownTime.setHours(hh, mm, ss); 
 
    
 
     // DOM object variables 
 
     var clock = null, btnStart = null, btnStop = null; 
 

 
     // Make a reference to the timer that will represent the running clock function 
 
     var timer = null; 
 

 
     window.addEventListener("DOMContentLoaded", function() { 
 

 
     // Make a cache variable to the DOM element we'll want to use more than once: 
 
     clock = document.getElementById("clock"); 
 
     btnStart = document.getElementById("btnStart"); 
 
     btnStop = document.getElementById("btnStop"); 
 

 
     // Wire up the buttons 
 
     btnStart.addEventListener("click", startClock); 
 
     btnStop.addEventListener("click", stopClock); 
 

 
     // Start the clock 
 
     startClock(); 
 

 
     }); 
 

 
     function startClock() { 
 
     // Make sure to stop any previously running timers so that only 
 
     // one will ever be running 
 
     clearTimeout(timer); 
 
     
 
     // Get the current time and display 
 
     console.log(countdownTime.getSeconds()); 
 
     countdownTime.setSeconds(countdownTime.getSeconds() - 1); 
 
     clock.innerHTML = countdownTime.toLocaleTimeString().replace(" AM", ""); 
 

 

 
     // Have this function call itself, recursively every 900ms 
 
     timer = setTimeout(startClock, 900); 
 
     } 
 
     
 
     function stopClock() { 
 
     // Have this function call itself, recursively every 900ms 
 
     clearTimeout(timer); 
 
     } 
 

 
}());

<div id="clock"></div> 
 
<button id="btnStart">Start Clock</button> 
 
<button id="btnStop">Stop Clock</button>