如何在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點擊事件偵聽器中創建時間間隔。下面的代碼工作，如果你只使用一個地方打印出來秒

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