Question

有没有一种创建“计时器”（或秒表）类的方法，使用该类创建的计时器可以在触发事件时暂停和恢复，例如点击按钮？

我试图创建一个类并使用它创建计时器对象，但是计时器一旦启动就无法暂停。

我尝试创建此类：

class countdown {
    constructor(min, sec) {
        this.mins = min;
        this.secs = sec;
        this.handler = 0;
    }

    static setTimer(x,minfield,secfield) {
        this.handler = setTimeout(() => {
            if (x.mins == 0 && x.secs == 0) {
                clearTimeout();
            } else {
                if (x.secs == 0) {
                    x.mins -= 1;
                    x.secs = 59;
                } else {
                    x.secs -= 1;
                }
            }

            this.updateTimer(x,minfield,secfield);
            this.setTimer(x,minfield,secfield)
        }, 1000)
    }

    static updateTimer(x,minfield, secfield){
        document.getElementById(minfield).innerHTML = x.mins;
        document.getElementById(secfield).innerHTML = x.secs;
    }

    static stopTimer(x,minfield,secfield) {
        // document.getElementById(minfield).innerHTML = x.mins;
        // document.getElementById(secfield).innerHTML = x.secs;
        clearTimeout(x.handler);
    }
}

用法：

    let countdown1 = new countdown(15,0);
    let countdown_act = false;
    document.getElementById('button').addEventListener( 'click', () => {
            if (!countdown_act) {
                countdown.setTimer(countdown1, 'ctdwn-mins', 'ctdwn-secs');
                countdown_act = true;
            } else {
                countdown.stopTimer(countdown1, 'ctdwn-mins', 'ctdwn-secs');
                countdown_act = false;
            }
            console.log(countdown_act);
        }
    )

countdown_act标志用于指示计时器的状态。

Answer 1

您的任何方法都无需static。此外，如果只记录秒数，然后在需要输出时计算分钟数，则使用起来会更加简单和容易。作为标准，将类名大写。最后，您可能正在寻找setInterval，而不是超时。

想想一个真实的计时器。您可以设置，启动，暂停和停止它。停止计时器实际上只是重新启动并暂停它，它是在创建时设置的，因此让我们用Timer，start，pause和{{1}来制作set }或stop。通过使用1s超时，它的行为与您在后台的行为相同，但是对于阅读您的代码的人来说，它更简洁，更容易理解

reset

在JavaScript中设置暂停/可恢复计时器

1 个答案: