Question

我有一个html表列出进程...每行一个。我想为每一行添加单独的计时器，以显示每个进程在每个进程启动时的运行时间。

我需要帮助在任何给定行完成一个进程后停止计时器，并在进程运行那么长时间后2小时后自动停止计时器。

下面的代码允许我运行多个计时器，但我不知道如何编写一个函数来停止各个计时器，或者在我们运行两次之后停止计时器。

任何人都可以帮我吗？

谢谢，

杰夫

<html> 
<head> 
<script type="text/javascript"> 

function timer(elementId){ 
 this.startTime = new Date(); 
 this.hours = 0, this.minutes = 0, this.seconds = 0, this.borrowed = 0;  
 this.update(elementId); 
} 

timer.prototype.getDifference=function(start,now,MAX){ 
 var diff = now - start - this.borrowed; 
 this.borrowed = 0; 
 if ( diff > -1 ) return diff; 
 this.borrowed = 1; 
 return (MAX + diff);  
} 

timer.prototype.timerPad=function(){ 
 this.seconds = this.addZero(this.seconds); 
 this.minutes = this.addZero(this.minutes); 
 this.hours = this.addZero(this.hours); 
} 

timer.prototype.addZero=function(value){ 
 return value < 10 ? ("0" + value) : value; 
} 

timer.prototype.update=function(elementId){ 
 var currTime = new Date(); 
 var startTime = this.startTime; 
 this.seconds = this.getDifference(startTime.getSeconds(), currTime.getSeconds(), 60); 
 this.minutes = this.getDifference(startTime.getMinutes(), currTime.getMinutes(), 60); 
 this.hours = this.getDifference(startTime.getHours(), currTime.getHours(), 2); 
 this.timerPad(); 
 var e = document.getElementById(elementId); 
 e.innerHTML = this.hours + ":" + this.minutes + ":" + this.seconds;
 var self = this; 
 this.timer = setTimeout(function(){self.update(elementId);},1000); 
}   

</script> 
</head> 
<body> 

<button type="button" onClick="javascript:new timer('timer1');">Start!</button>
<button type="button" onClick="">Stop!</button>
<div id="timer1"></div><p>

<button type="button" onClick="javascript:new timer('timer2');">Start!</button>
<button type="button" onClick="">Stop!</button>
<div id="timer2"></div>
</body> 
</html>

Answer 1

你可以：

创建一个对象来存储特定计时器的setTimeout变量
创建工厂函数以创建新的计时器，将setTimeout变量存储到全局对象
创建析构函数以取消计时器（如果存在）

var timers = {};
function createTimer(elementId) {
    var timer = new timer(elementId);
    timers[elementId] = setTimeout((function() {timer.update();}), 1000);
}

function destroyTimer(elementId) {
    if (elementId in timers) {
        clearTimeout(timers[elementId]);
    }
}

显然，这可能需要稍微更新以适应您的情况。

Answer 2

在内联事件处理程序中创建新的计时器对象将是处理两个不同控件的问题。您可以按如下方式更改HTML / JS：

Javascript：（添加了startTimer和stopTimer函数以及用于计时器原型的stop方法）

 <script type="text/javascript"> 

    function timer(elementId){ 
    this.startTime = new Date(); 
    this.hours = 0, this.minutes = 0, this.seconds = 0, this.borrowed = 0; 
    this.update(elementId); 
    var that = this;
    //setTimeout(function(){that.stop()}, 7200000) //Uncomment this to enable autostop after 2 hours
} 

timer.prototype.getDifference=function(start,now,MAX){ 
    var diff = now - start - this.borrowed; 
    this.borrowed = 0; 
    if ( diff > -1 ) return diff; 
    this.borrowed = 1; 
    return (MAX + diff); 
} 

timer.prototype.timerPad=function(){ 
    this.seconds = this.addZero(this.seconds); 
    this.minutes = this.addZero(this.minutes); 
    this.hours = this.addZero(this.hours); 
} 

timer.prototype.addZero=function(value){ 
    return value < 10 ? ("0" + value) : value; 
} 

timer.prototype.stop=function(){ 
 clearTimeout(this.timerKey); 
} 

timer.prototype.update=function(elementId){ 
    var currTime = new Date(); 
    var startTime = this.startTime; 
    this.seconds = this.getDifference(startTime.getSeconds(), currTime.getSeconds(), 60); 
    this.minutes = this.getDifference(startTime.getMinutes(), currTime.getMinutes(), 60); 
    this.hours = this.getDifference(startTime.getHours(), currTime.getHours(), 2); 
    this.timerPad(); 
    var e = document.getElementById(elementId); 
    e.innerHTML = this.hours + ":" + this.minutes + ":" + this.seconds; 
    var self = this; 
    this.timerKey = setTimeout(function(){self.update(elementId);},1000); 
} 
var timers = []; 
function startTimer(timerName) { 
    var timerObj = new timer(timerName); 
    timers[timerName] = timerObj; 
} 

function stopTimer(timerName) { 
    var timerObj = timers[timerName]; 
    if(timerObj) timerObj.stop(); 
} 
     </script>

HTML：（更改onclick事件处理程序以调用startTimer / stopTimer传递计时器名称）

<button type="button" onclick="javascript:startTimer('timer1');">
    Start!</button>
  <button type="button" onclick="javascript:stopTimer('timer1');">
    Stop!</button>
  <div id="timer1">
  </div>
  <p>
     <button type="button" onclick="javascript:startTimer('timer2');">
    Start!</button>
  <button type="button" onclick="javascript:stopTimer('timer2');">
    Stop!</button>
    <div id="timer2">
    </div>

编辑：（2小时后自动停止）将计时器方法定义更改为：

function timer(elementId){      
    this.startTime = new Date();      
    this.hours = 0, this.minutes = 0, this.seconds = 0, this.borrowed = 0;      
    var that = this;
setTimeout(function(){that.stop()}, 7200000);
}

需要有关停止setTimeout（）计时器的帮助

2 个答案: