Javascript

Question

我有两个显示分钟和秒的函数。在函数内部，我使用带有 setTimeout 的 IIFE 来计算时间。得到这个之后，很难弄清楚如果单击暂停按钮我该如何暂停显示。

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

我意识到这可能不是一个好方法，但我花了很多时间（试图学习如何使用 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);

    }

我已经尝试了一些东西。

在 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);
    }
}

使用没有做任何事情的 setInterval 和 clearInterval。

这可能吗？不知道还有什么地方可以看。谢谢

Answer 1

你不能stop/pause一个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>

Javascript - 暂停具有 setTimeout 的 IIFE 输出并显示 min/sec - 番茄钟

Javascript - Pausing an IIFE output that has setTimeout and displays min/sec - Pomodoro Clock

jquery

settimeout

iife