javascript - 番茄钟: resume button not working

Question

我正在制作一个番茄钟。我采用了一个时钟对象，添加了开始、暂停、恢复功能。为了在 start 函数中重复运行时钟，我添加了两个变量 s 和 b 来保留 session 和休息的原始时间。因此，在 pause 函数中，当我删除计时器时， session 和休息的原始时间将被删除。所以 resume 功能时钟从头开始计时。现在，如何以正确的方式编写pause函数来使resume？

这是 JSfiddle 链接。 http://jsfiddle.net/sajibBD/f18nh323/3/

提前致谢!

var Clock = {
sessionSeconds: 0,
breakSeconds: 0,

start: function () {
    var self = this;
    var s = this.sessionSeconds + 1;
    var b = this.breakSeconds + 1;

    this.interval = setInterval(function () {
        if (s > 0) {
            s -= 1;
            $('#state').text('Session');
            $("#min").text(Math.floor(s / 60 % 60));
            $("#sec").text(parseInt(s % 60));
        } else if (b > 0) {
            b -= 1;
            $('#state').text('Break');
            $("#min").text(Math.floor(b / 60 % 60));
            $("#sec").text(parseInt(b % 60));
        } else if (b === 0) {
            s = self.sessionSeconds + 1;
            b = self.breakSeconds + 1;
        }

        var min = $("#min").text();
        var sec = $("#sec").text();

        if (min.length === 1) {
            $("#min").text('0' + min);
        }
        if (sec.length === 1) {
            $("#sec").text('0' + sec);
        }

    }, 1000)
},

pause: function () {
    clearInterval(this.interval);
    delete this.interval;
},

resume: function () {
    if (!this.interval) this.start();
},
}

Answer 1

试试这个:

http://jsfiddle.net/f18nh323/5/

var Clock = {
sessionSeconds: 0,
breakSeconds: 0,

start: function () {
    var self = this;
    var s = this.sessionSeconds + 1;

    var b = this.breakSeconds + 1;

    this.interval = setInterval(function () {

        if (s > 0) {
            s -= 1;
            $('#state').text('Session');
            $("#min").text(Math.floor(s / 60 % 60));
            $("#sec").text(parseInt(s % 60));
        } else if (b > 0) {
            b -= 1;
            $('#state').text('Break');
            $("#min").text(Math.floor(b / 60 % 60));
            $("#sec").text(parseInt(b % 60));
        } else if (b === 0) {
            s = self.sessionSeconds + 1;
            b = self.breakSeconds + 1;
        }


        self.sessionSeconds = s;
        var min = $("#min").text();
        var sec = $("#sec").text();



        if (min.length === 1) {
            $("#min").text('0' + min);
        }
        if (sec.length === 1) {
            $("#sec").text('0' + sec);
        }


    }, 1000)
},

pause: function () {
    clearInterval(this.interval);
    delete this.interval;
},

resume: function () {
    if (!this.interval) this.start();
},

}