setTimeout（）タイマーを停止するのに助けが必要

私は1行に1つずつプロセスをリストしたhtmlテーブルを持っています。私は、それぞれのプロセスの経過時間を示すために、それぞれの行に別々のタイマーを追加したいと思います。setTimeout（）タイマーを停止するのに助けが必要

プロセスが完了したらタイマーを停止し、プロセスがその長さで実行されると2時間後に自動的にタイマーを停止する必要があります。

以下のコードでは複数のタイマーを実行できますが、個々のタイマーを停止する関数や、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>

出典

2010-12-28 Jeff

インラインイベントハンドラで新しいタイマーオブジェクトを作成することは、2つの異なるコントロールを処理する上で問題になります。次のように、HTML/JSを変更することができます。

Javascriptを：（タイマープロトタイプに停止方法と一緒に添加startTimerとは、stopTimer機能）

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

出典

2010-12-28 17:18:29 Chandu

これは完全に機能しました！それはまさに私が達成しようとしていたものですが、何日もつまずきます。助けてくれてありがとう。今私は2時間後に自動停止する方法を理解する必要があり、私はすべて設定されています。再度、感謝します！ – Jeff

うれしかったです。 2時間後にポストを編集してタイマーのオートストップを作成しました。 – Chandu

それは素晴らしいです！もう一度ありがとう....私は本当にこれで苦労しています。 – Jeff

あなたは可能性：

、新しいタイマーを作成するファクトリ関数を作成して店舗を特定のタイマー
のための店のsetTimeout変数にオブジェクトを作成します。グローバルオブジェクトにsetTimeout変数を設定
Cre （存在する場合）明らかに

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

をタイマーをキャンセルするデストラクタ関数を食べ、これはあなたの状況で動作するようにビットを更新する必要がある場合があります。

出典

2010-12-28 17:17:32 brildum

感謝をあなたの助けのために...それは非常に多くのCybernateによって投稿ソリューションのように見えます。 – Jeff

setTimeout（）タイマーを停止するのに助けが必要

答えて

関連する問題