javascript - 如何在 JavaScript 中设置计时器持续时间？

Question

我的计时器有一些问题。更改计时器持续时间时，我无法使计时器从新的持续时间开始。我该如何解决这个问题？请帮忙。这是我的代码:

CSS:

div {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid;
    text-align: center;
}

HTML:

<div class='session'>2</div>
<div id='increase' onclick='decrease()'>-</div>
<div id='increase' onclick='increase()'>+</div>
<div class='session' id='session' onclick='setInterval(changeSessionDuration,100)'>2</div>

JS:

var x = document.getElementsByClassName('session');
var seconds = 60;

function increase() {
    for (var i = 0; i < x.length; i++) {
        x[i].innerHTML++;
    }
}

function decrease() {
    for (var i = 0; i < x.length; i++) {
        if (x[i].innerHTML > 0) {
            x[i].innerHTML--;
        }
    }
}

var session = x[1].innerHTML - 1;

function changeSessionDuration() {
    if (seconds > 0) {
        seconds--;
        if (seconds == 0 && session > 0) {
            session--;
            seconds = 60;
        }
    }
    x[1].innerHTML = session + ':' + seconds;
}

Answer 1

如果我正确理解您的问题，您的计时器不会在您之前添加的计时器运行之前的正确时间启动？

如果是的话，那是因为这一行:

var session = x[1].innerHTML - 1;

在增加/减少时间之前， session 值已设置。

您应该在增量/减量之后或开始运行之前设置 session 值，如下所示:

<div class='session' id='session' onclick='setSession(); setInterval(changeSessionDuration,100);'>2</div>

JS 是:

var x = document.getElementsByClassName('session');
var seconds = 60;

function increase() {
    for (var i = 0; i < x.length; i++) {
        x[i].innerHTML++;
    }
}

function decrease() {
    for (var i = 0; i < x.length; i++) {
        if (x[i].innerHTML > 0) {
            x[i].innerHTML--;
        }
    }
}

var session;
function setSession(){
    session = x[1].innerHTML - 1;
}

function changeSessionDuration() {
    if (seconds > 0) {
        seconds--;
        if (seconds == 0 && session > 0) {
            session--;
            seconds = 60;
        }
    }
    x[1].innerHTML = session + ':' + seconds;
}

我的示例代码很脏，你应该适合你的口味。