JavaScript-暂停具有SettieMout的IIFE输出，并显示最小/秒-Pomodoro时钟

Question

我有两个显示分钟和秒的功能。在功能中，我使用的IIFE带有SettieMout来计算时间。获得此操作后，很难弄清楚如果单击暂停按钮，我如何暂停显示。

计时器正常工作并正确显示。

我意识到这可能不是一个好方法，但是我花了很多时间（试图学习如何使用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;周围的标志和if语句，因此，如果单击我的暂停按钮，则会更改标志，而另一个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和clear Interval。

这可能吗？不确定在哪里看。谢谢

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>