Need help with stopping setTimeout() timers_问答_开发者

I have an html table listing processes... one per row. I'd like to add separate timers to each row to show elapsed time of each process as each one starts.

I need help stopping the timers once a process is complete for any given row, and to automatically stop the timer after 2 hours if a process runs that long.

The code below allows me to run multiple timers but I do not know how to write a function to stop the individual timers, or to stop a timer after two ours of run time.

Can anyone help me with this?

Thanks,

Jeff

<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(st开发者_C百科artTime.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>

Having the new timer object created in the inline event handler will be a problem to deal with two different controls. You can change the HTML/JS as follows:

Javascript:(added startTimer and stopTimer functions along with a stop method to timer prototype)

 <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:(Changed the onclick event handlers to call startTimer/stopTimer passing the timer name)

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

Edit:(autostop after 2 hrs) Change your timer method definition to as follows:

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

You could:

Create an object to store setTimeout variables for specific timers
Create a factory function to create new timers, store setTimeout variables into global object
Create destructor function to cancel timers (if they exist)

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

Obviously, this might have to be updated a bit to work in your situation.

Need help with stopping setTimeout() timers

精彩评论

关注公众号

热门标签

图文推荐

Need help with stopping setTimeout() timers

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：