Tweet
In the script below, I've highlighted the sections pertaining to the calculation -- which is:
total increment = n
elapsed increment = i
remaining increment = n - i
elapsed time = (currentTime - startTime)
execution rate = (elapsed increment / elapsed time)
time remaining = (remaining increment / execution rate)
------------------------------------------------------------
ETA = ((n - i) / (i / (new Date().getTime() - startTime)));
------------------------------------------------------------
Fluctuating Numbers:
What I mean by this is, the higher the number(n), the more uncertain the calculated time seems to become, causing a visibly erratic display.
The only thing I could think of doing was to show the value less often, such as:
if(i % 10 == 0){output calculation...}
-- but that only reduces the visual blur, and tends to make the countdown look out of sync.
So, anyway, I'd just like to know if anyone has ideas for accomplishing this without those side-effects.
The loop value is set at an extremely large number to emphasise said behavior:
total increment = n
elapsed increment = i
remaining increment = n - i
elapsed time = (currentTime - startTime)
execution rate = (elapsed increment / elapsed time)
time remaining = (remaining increment / execution rate)
------------------------------------------------------------
ETA = ((n - i) / (i / (new Date().getTime() - startTime)));
------------------------------------------------------------
Fluctuating Numbers:
What I mean by this is, the higher the number(n), the more uncertain the calculated time seems to become, causing a visibly erratic display.
The only thing I could think of doing was to show the value less often, such as:
if(i % 10 == 0){output calculation...}
-- but that only reduces the visual blur, and tends to make the countdown look out of sync.
So, anyway, I'd just like to know if anyone has ideas for accomplishing this without those side-effects.
The loop value is set at an extremely large number to emphasise said behavior:
Code:
<html>
<head>
<title>-</title>
<script type="text/JavaScript">
var i, interval, stop;
function Recurse(n, startTime, oForm){
var ETA, H, M, m, S, s;
i++;
[COLOR=red]
ETA = ((n - i) / (i / (new Date().getTime() - startTime)));
H = new Date(ETA).getUTCHours();
M = new Date(ETA).getMinutes();
S = new Date(ETA).getSeconds();
M < 10 ? m = "0" + M : m = M;
S < 10 ? s = "0" + S : s = S;
oForm.timeRem.value = H + ":" + m + ":" + s;
[/COLOR]
oForm.progress.value = i;
oForm.percentage.value = Math.floor(((i / n) * 100)) + "%";
if (i >= n || stop){controlUpdate("Complete");}
}
function controlUpdate(callString){
var oForm, n, startTime;
oForm = document.timeTest;
switch(callString){
case "Start" :
n = new Number(oForm.test.value);
if(isNaN(n) || n < 1){
alert("loop value must be a number greater than 0. ");
}
else{
i = 0;
stop = false;
oForm.cancel.disabled = 0;
oForm.start.disabled = 1;
oForm.test.disabled = 1;
[COLOR=red]startTime = new Date().getTime();[/COLOR]
interval = setInterval(function(){Recurse(n, startTime, oForm);},1);
}
break;
case "Cancel" :
clearInterval(interval);
stop = true;
oForm.rs.disabled = 0;
oForm.cancel.disabled = 1;
break;
case "Complete" :
clearInterval(interval);
oForm.rs.disabled = 0;
break;
case "Reset" :
oForm.cancel.disabled = 1;
oForm.start.disabled = 0;
oForm.test.disabled = 0;
oForm.rs.disabled = 1;
break;}
}
</script>
<style type="text/css">
form{
text-align:center
}
input{
text-align:center;vertical-align:middle
}
label{
padding-left:10px;padding-right:5px
}
</style>
</head>
<body>
<form name="timeTest" onreset="controlUpdate('Reset')">
<label>ETA :</label><input name="timeRem" size="10" readonly>
<br><br>
<label>i :</label><input name="progress" size="10" readonly>
<label>% :</label><input name="percentage" size="10" readonly>
<br><br>
<label>loop :</label><input name="test" value="999999" size="10" maxlength="7">
<input name="start" type="button" value="Start" onclick="controlUpdate('Start')">
<input name="cancel" type="button" value="Cancel" disabled onclick="controlUpdate('Cancel')">
<input name="rs" type="reset" disabled>
</form>
</body>
</html>
Comment