如何在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;

在增加/減少時間之前，已經設置了會話值。

您應該在增加/減少之后或開始運行之前設置會話的值，例如：

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

而且我的示例代碼很臟，您應該適合自己的口味。

Answer 2

發生這種情況是因為您沒有清除以前設置的間隔。 您需要在javascript click事件監聽器中創建間隔。 如果僅使用一個地方打印幾秒鍾，下面的代碼將起作用

var x=document.getElementsByClassName('session'),
    interval;

x[0].addEventListener('click', function(){
  if(interval){
    clearInterval(interval);
  }
  interval = setInterval(changeSessionDuration,100)
}, false); 

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[0].innerHTML-1;

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