Javascript-暂停具有setTimeout并显示分钟/秒的IIFE输出-Pomodoro时钟

我有两个显示分和秒的函数。在函数中，我使用带有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);

    }

我试过几种方法

在

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，它什么都不做

---

这可能吗？不知道还能去哪里看。谢谢你

你不能停止/暂停

设置超时

或

清除超时

而不引用计时器，存储它，然后调用

清除超时（计时器）

或

清除间隔（计时器）

因此，将其替换为：

setTimeout（somefunction）

您需要：

timer=setTimeout（somefunction）

而且，

timer

变量需要在所有使用它的函数都可以访问的范围内声明

有关详细信息，请参阅

如果没有计时器的参考，你将无法停止它，这导致你对其他方法进行了白费力气的追逐，这是对你真正需要的东西的过度思考

最后，我认为你应该有一个函数来完成所有的倒计时，这样你就只有一个计时器需要担心了

最后，您可以使用JavaScript

Date

对象及其

get

/

set

小时、分钟和秒方法来处理反向计数

（函数（）{
//询问用户开始倒数的时间。
var countdown=prompt（“您想在时钟上放置多少时间？（hh:mm:ss）”；
//将该字符串拆分为存储在数组中的HH、MM和SS
var countdownArray=countdown.split（“：”）
//提取阵列的各个部分并转换为数字：
var hh=parseInt（倒计时数组[0]，10）；
var mm=parseInt（倒计时数组[1]，10）；
var ss=parseInt（倒计时数组[2]，10）；
//创建新日期并将其设置为倒计时值
var countdown=新日期（）；
倒计时。设定小时数（小时、毫米、秒）；
//DOM对象变量
var clock=null，btnStart=null，btnStop=null；
//参考表示运行时钟功能的计时器
var定时器=null；
addEventListener（“DOMContentLoaded”，函数（）{
//为要多次使用的DOM元素创建缓存变量：
时钟=document.getElementById（“时钟”）；
btnStart=document.getElementById（“btnStart”）；
btnStop=document.getElementById（“btnStop”）；
//把钮扣系好
btnStart.addEventListener（“单击”，开始锁定）；
btnStop.addEventListener（“单击”，停止时钟）；
//启动时钟
startClock（）；
});
函数startClock（）{
//确保停止任何以前运行的计时器，以便
//一个人永远不会跑
清除超时（计时器）；
//获取当前时间并显示
log（countdownstown.getSeconds（））；
countdownTime.setSeconds（countdownTime.getSeconds（）-1）；
clock.innerHTML=countdownTime.toLocaleTimeString（）.replace（“AM”，“AM”）；
//让这个函数自己调用，每900毫秒递归一次
定时器=设置超时（StartLock，900）；
}
函数stopClock（）{
//让这个函数自己调用，每900毫秒递归一次
清除超时（计时器）；
}
}());

启动时钟
停止计时
我更新了我的问题，这会改变你的答案吗？我想看看如何应用这个答案。@WayneBunch不，我的答案就是你需要的。你不能停止/暂停
setTimeout
或
clearTimeout
而不引用计时器，存储它，然后调用
clearTimeout（timer）
或
clearTimeout（timer）
@WayneBunch查看我更新的答案，从用户输入的值开始倒计时。很好，我现在就知道了。谢谢快速提问：如果这样的事情持续几个小时，会不会消耗很多内存？我在看StartLock（）示波器，它一直在看。我不知道这是怎么回事。