Javascript clearInterval加速計時器而不是暫停它

Question

我有一個我正在開發的ColdFusion應用程序，需要一個可以啓動，暫停和清除的計時器。我的問題是，儘管它在IE9，Firefox，Opera，Chrome和Safari中運行得很好，但它在IE8（這是我的用戶羣中的一大塊）中不起作用。問題是，當我點擊並嘗試停止計時器時，而不是計時器停止，它會加速。它只在IE8中（其他瀏覽器正常工作）。

- HTML代碼 -

function check_timer() { 
    if($('#timer').hasClass('start')) { 
     $('#timer').val("Stop Timer"); 
     timer = setInterval ("increaseCounter()", 1000); 
     $('#timer').removeClass('start') 
    } 
    else { 
     if(typeof timer != "undefined") { 
      clearInterval(timer); 
     } 

     $('#timer').val("Start Timer"); 
     $('#timer').addClass('start') 
    } 
} 

function increaseCounter() { 
    var secVal; 
    var minVal; 
    secVal = parseInt($('#counterSec').html(),10) 
    minVal = parseInt($('#counterMin').html(),10) 
    if(secVal != 59) { 
     secVal = secVal + 1; 
     if(secVal < 10) { 
      secVal = secVal.toString(); 
      secVal = "0" + secVal; 
     } 
     $('#counterSec').html(secVal); 
    } 
    else { 
     if(minVal != 59){ 
      minVal = minVal + 1; 
      if(minVal < 10) { 
       minVal = minVal.toString(); 
       minVal = "0" + minVal; 
      } 
      $('#counterMin').html(minVal); 
     } 
     else { 
      $('#counterHour').html((parseInt($('#counterHour').html(),10)+1)); 
      $('#counterMin').html("00"); 
     } 
     $('#counterSec').html("00"); 
    } 
} 

- DIV含時鐘 -

<div class="supportClock" style="width:150px; border-radius:20px;" align="center"> 
      <span id="addZeroHour"></span> 
      <span id="counterHour">00</span> 
      :<span id="addZeroMin"></span> 
      <span id="counterMin">00</span> 
      :<span id="addZeroSec"></span> 
      <span id="counterSec">00</span> 
     </div> 

- 按鈕激活時鐘 -

<input type="button" id="timer" class="start" value="Start Timer" onclick="check_timer()"> 

Answer 1

看一看這裏：http://jsfiddle.net/qEATW/3/

1. 即使你設置的時間間隔爲，例如，一秒鐘，它不一定會調用之間一秒。
2. 對於超時和時間間隔，總是傳入函數，而不是字符串：setInterval(increaseCounter, 1000)
3. 沒有理由從DOM解析值。這樣做效率非常低。如果您使用日期差異，則可以簡單地存儲一個變量（開始時間），並從那時開始獲取小時/分鐘/秒。無論你喜歡什麼，你都可以更新視圖，並且永遠是準確的。
4. 我個人更喜歡「遞歸」超時而不是間隔。隨着時間間隔，你總是需要採取額外的步驟來清除你想要停止的時間間隔。您可以通過幾種不同的方式停止超時循環，並且更容易理解正在發生的事情。超時還允許我們靈活地更改通話之間的時間（不是這裏相關的）。
5. 將內聯事件處理程序（在HTML元素上）綁定被認爲是不好的做法。如果您已經在使用jQuery，那麼jquery使這個過程變得非常簡單，這實在沒有任何藉口。
6. 我擺脫了你所擁有的「addZero」跨度。我不確定你在與他們做什麼，但他們沒有必要，只會讓標記混亂。

HTML：

<div class="supportClock" style="width:150px; border-radius:20px;" align="center"> 
    <span id="counterHour">00</span> 
    : <span id="counterMin">00</span> 
    : <span id="counterSec">00</span> 
</div> 
<input type="button" id="timer" class="start" value="Start Timer"> 

JS：

(function(){ 
    var clock = $(".supportClock"), 
     hr = $("#counterHour"), 
     min = $("#counterMin"), 
     sec = $("#counterSec"),  
     running = false, 
     startTime, 
     timeout; 

    function updateClock(){ 
     var time = (new Date()) - startTime, 
      hrs = Math.floor(time/1000/60/60), 
      mins = Math.floor(time/1000/60 - hrs * 60), 
      secs = Math.floor(time/1000 - mins * 60 - hrs * 60 * 60); 

     hr.text(hrs > 9 ? hrs : '0' + hrs); 
     min.text(mins > 9 ? mins: '0' + mins); 
     sec.text(secs > 9 ? secs : '0' + secs); 

     timeout = setTimeout(updateClock, 1000/2); 
    } 

    $("#timer").click(function(){ 
     if (!running){ 
      running = true; 
      this.value = "Stop Timer"; 
      startTime = new Date(); 
      updateClock(); 
     } 
     else{ 
      running = false; 
      this.value = "Start Timer"; 
      clearTimeout(timeout); 
     } 
    }); 
})(); 

Answer 2

將其添加到劇本頂部（功能外）：

var timer; 

否則你永遠不會遇到這樣的分支：

if(typeof timer != "undefined") 

原因：有ID爲「計時器」的元素，你可以通過使用timer不建議的修改訪問它和定時器決不會類型「未定義」

或者簡單地使用另一個名稱作爲超時變量。