一個頁面上的多個倒計時定時器

當前正在一個項目上工作，該項目需要一個頁面上有兩個定時器。定時器需要有一個啓動按鈕，並且它們有不同的定時（即定時器1持續10秒，定時器2持續20秒）。這是我正在使用的腳本，但我不知道如何複製定時器並讓每個定時器獨立工作。一個頁面上的多個倒計時定時器

是否有任何人誰可以很容易地改變這個腳本以一個正常的兩個定時器？

<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
    var interval; 
    var minutes = 0; 
    var seconds = 10; 

    function countdown(element) { 
     interval = setInterval(function(timer) { 
      var el = document.getElementById(element); 
      if(seconds == 0) { 
       if(minutes == 0) { 
        (el.innerHTML = "STOP!");  

        clearInterval(interval); 
        return; 
       } else { 
        minutes--; 
        seconds = 60; 
       } 
      } 
      if(minutes > 0) { 
       var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
      } else { 
       var minute_text = ''; 
      } 
      var second_text = seconds > 1 ? '' : ''; 
      el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ''; 
      seconds--; 
     }, 1000); 
    } 
var start = document.getElementById('start'); 

start.onclick = function(timer) { 
    if (!interval) { 
     countdown('countdown'); 
    } 
} 

</script> 
</head> 

<body> 
<div id='countdown'></div> 
<input type="button" onclick="countdown('countdown');this.disabled = true;" value="Start" /> 
</body> 
</html>

來源

2014-04-01 user3486844

var interval; 

var countdown1 = { 
    minutes:0, 
    seconds: 10 
}; 

var countdown2 = { 
    minutes:0, 
    seconds: 2 
} 

function countdown(element) { 
    alert(element); 
    var cd; 
    element === 'countdown1' ? cd = countdown1 : cd = countdown2; 
    interval = setInterval(function(timer) { 
     var el = document.getElementById(element); 
     if(cd.seconds == 0) { 
      if(cd.minutes == 0) { 
       (el.innerHTML = "STOP!");  

       clearInterval(interval); 
       return; 
      } else { 
       cd.minutes--; 
       cd.seconds = 60; 
      } 
     } 
     if(cd.minutes > 0) { 
      var minute_text = cd.minutes + (cd.minutes > 1 ? ' minutes' : ' minute'); 
     } else { 
      var minute_text = ''; 
     } 
     var second_text = seconds > 1 ? '' : ''; 
     el.innerHTML = minute_text + ' ' + cd.seconds + ' ' + second_text + ''; 
     cd.seconds--; 
    }, 1000); 
} 
var start = document.getElementById('start'); 


<div id='countdown'></div> 
<input type="button" onclick="countdown('countdown1');this.disabled = true;" value="Start" /> 
<div id="countdown1"></div> 

<input type="button" onclick="countdown('countdown2');this.disabled = true;" value="Start" /> 
<div id="countdown2"></div>

小提琴：http://jsfiddle.net/dn3hJ/

來源

2014-04-01 21:25:15 dannyde

在頂部而不僅僅是原始代碼上有一點解釋是很好的。 –

有你這樣做防止你擴大代碼幾件事情。如果你想要一個可重用的定時器，你不能設置它將使用的變量。所以首先要擺脫頂部的三個變量，並在函數的範圍內重新創建它們。

這樣，每次函數被調用時，將會爲它的執行創造了一套新的變數。

的分和秒可能是最好作爲參數傳遞和間隔應的功能的範圍內來限定。

其次，您正在內置並在腳本中設置點擊處理程序BOTH。擺脫其中的一個（最好擺脫內聯版本）。

然後，你有一個計時器變量作爲點擊處理程序和setInterval，但從未使用的參數。該變量將被設置爲事件處理程序上的單擊事件（並且再次未被使用），並且將在setInterval上未定義。所以他們真的不應該在那裏。

性能問題，你可能想知道的是，你正在做一個DOM查找的計數器每一秒。你應該在每個函數調用一開始就得到它並緩存它。

在這一點上，你函數看起來或多或少像這樣

function countdown(element, minutes, seconds) { 
    // Fetch the display element 
    var el = document.getElementById(element); 

    // Set the timer 
    var interval = setInterval(function() { 
     if(seconds == 0) { 
      if(minutes == 0) { 
       (el.innerHTML = "STOP!");  

       clearInterval(interval); 
       return; 
      } else { 
       minutes--; 
       seconds = 60; 
      } 
     } 

     if(minutes > 0) { 
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
     } else { 
      var minute_text = ''; 
     } 

     var second_text = seconds > 1 ? '' : ''; 
     el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ''; 
     seconds--; 
    }, 1000); 
}

和您的設置或多或少這樣

//Start as many timers as you want 

var start1 = document.getElementById('timer1'); 
var start2 = document.getElementById('timer2'); 

start1.onclick = function() { 
    countdown('countdown1', 0, 15); 
} 

start2.onclick = function() { 
    countdown('countdown2', 0, 10); 
}

當然，你需要額外的按鈕和反

<div id='countdown1'></div> 
<div id='countdown2'></div> 
<input id="timer1" type="button" value="Start timer 1" /> 
<input id="timer2" type="button" value="Start timer 2" />

工作示例http://codepen.io/anon/pen/Jmpcq/?editors=101

- 注：精密計時器，setInterval()可能不是一個很好的選擇，因爲在精確的時間間隔不能保證，其所跟蹤的時間可能會經過一段時間被延遲。對於精確時間至關重要的應用，還有其他方法（例如sitepoint.com/creating-accurate-timers-in-javascript html5rocks.com/en/tutorials/webperformance/usertimin），感謝@KaiKarver在評論中指出。

來源

2014-04-01 21:28:12 guioconnor

很好給一個工作的例子。但取決於'setInterval（）'的時間是不是很準確。更好地使用例如'Date.now（）'爲時間信息，參見例如http://www.sitepoint.com/creating-accurate-timers-in-javascript/ 如果你想要更高的準確性，請嘗試'performance.now（）'http：//www.html5rocks。com/en/tutorials/webperformance/usertiming/ –

乾杯@KaiCarver，你的準確性和對鏈接的感謝是正確的，然而，問題是如何擁有多個定時器，而不是如何使它們更精確，所以我認爲沒有一點讓答案比它更復雜。 – guioconnor

好吧，你提到了一個（相當不重要的）性能問題，雖然這個問題不是提高性能......我的觀點是人們（像我一樣）可能會遇到這個帖子尋找一個簡單的方法來實現一個頁面上的多個定時器並且可能不知道所實施的定時器可能是瘋狂不準確的。因此，在您的其他有用答案中提及這一事實可能是公共服務。 –

一個頁面上的多個倒計時定時器

回答

相關問題