How to write a browser based timer


C

Cal Who

I need to know what to read about.

I want to write a browser based timer such that when one presses some key it
starts incrementing and pressing another key pauses it.

HTML to be on the same machine as the browser.

Timer to display minutes and seconds. (an hour max)

At each press the timer continues to count up from the last time it was
paused.

What I need to know is what would be an appreciated language to study.

Is Javascript the way to go?

Must run on MAC or PC.

I have some programming experience and given a direction can probably learn
what I need to do this.

Any examples of something close anywhere?

Thanks for any helpful direction comments.
 
Ad

Advertisements

S

Scott Sauyet

Cal Who said:
I need to know what to read about.

I want to write a browser based timer such that when one presses some key it
starts incrementing and pressing another key pauses it.
[ ... ]

What I need to know is what would be an appreciated language to study.

Is Javascript the way to go?

I assume you mean "appropriate language".

You can certainly do what you want with Javascript. And it shouldn't
be difficult.

You need to look at three features of Javascript:

- Keyboard Events, to listen for the keystrokes that matter
- setTimeout or setInterval to occasionally check the time
- DOM manipulation to display the results

Alternately, you can probably search the web for Javascript stopwatch
implementations and find one that either does exactly what you want or
could easily be modified to do so.

-- Scott
 
G

Gene Wirchenko

On Tue, 21 Feb 2012 13:04:24 -0800 (PST), Scott Sauyet

[snip]
I assume you mean "appropriate language".

You can certainly do what you want with Javascript. And it shouldn't
be difficult.

You need to look at three features of Javascript:

- Keyboard Events, to listen for the keystrokes that matter
- setTimeout or setInterval to occasionally check the time
- DOM manipulation to display the results

Alternately, you can probably search the web for Javascript stopwatch
implementations and find one that either does exactly what you want or
could easily be modified to do so.

Are they very accurate?

Pause a second, update, then repeat will be inaccurate because of
the execution time being indeterminate.

Following the clock will be somewhat more CPU-intensive.

Assuming it exists, what is the third way that works well?

Sincerely,

Gene Wirchenko
 
E

Evertjan.

Gene Wirchenko wrote on 21 feb 2012 in comp.lang.javascript:
On Tue, 21 Feb 2012 13:04:24 -0800 (PST), Scott Sauyet

[snip]
I assume you mean "appropriate language".

You can certainly do what you want with Javascript. And it shouldn't
be difficult.

You need to look at three features of Javascript:

- Keyboard Events, to listen for the keystrokes that matter
- setTimeout or setInterval to occasionally check the time
- DOM manipulation to display the results

Alternately, you can probably search the web for Javascript stopwatch
implementations and find one that either does exactly what you want or
could easily be modified to do so.

Are they very accurate?

Pause a second, update, then repeat will be inaccurate because of
the execution time being indeterminate.

Following the clock will be somewhat more CPU-intensive.

Not at all.

During run, display every [say] 200ms:
actualTime - lapStartTime + endCountLastLap

During pause, display static:
display endCountLastLap

Reset:
endCountLastLap = 0
setPause
 
G

Gene Wirchenko

Gene Wirchenko wrote on 21 feb 2012 in comp.lang.javascript:
[snip]
Following the clock will be somewhat more CPU-intensive.

Not at all.

I am thinking yes, it will be more intensive, because the
updating must be more often to avoid having jerky output. If the hit
is still not that much, well and good.

(I am leery of anything approaching busy wait, because it can
really suck up the CPU time.)

[snip]

Sincerely,

Gene Wirchenko
 
E

Evertjan.

Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:
Gene Wirchenko wrote on 21 feb 2012 in comp.lang.javascript:
[snip]
Following the clock will be somewhat more CPU-intensive.

Not at all.

I am thinking yes, it will be more intensive, because the
updating must be more often to avoid having jerky output. If the hit
is still not that much, well and good.

200ms is enough, please try it out,
but even if it were each 50ms,
the CPU use would be do very-very-very low.

No incrementing is done, just new Date() and some adding,
and a DOM-innerHTML write.
(I am leery of anything approaching busy wait, because it can
really suck up the CPU time.)

What is "busy wait"??

setTimeout() does not take cpu-time until it fires at the end,
since it is just an added task at the general CPU-interrupt stack,
if that is what you mean. This task runs anyway on each machine's OS.
 
Ad

Advertisements

G

Gene Wirchenko

On 21 Feb 2012 23:27:08 GMT, "Evertjan."

[snip]
What is "busy wait"??

Busy wait is when a process consumes CPU time to implement a
wait. One can delay with a for loop (busy wait) or a call to sleep()
(not busy wait).
setTimeout() does not take cpu-time until it fires at the end,
since it is just an added task at the general CPU-interrupt stack,
if that is what you mean. This task runs anyway on each machine's OS.

Well, there is a loop being executed over and over. That is why
my comment about approaching busy wait.

Sincerely,

Gene Wirchenko
 
R

RobG

Gene Wirchenko wrote on 21 feb 2012 in comp.lang.javascript:
@gmail.com> wrote:
[snip]
     Are they very accurate?

They should be based on the system clock, so should have equivalent
accuracy. More import is whether the stopwatch will update at the
appropriate time, which is a function of system load at the time the
function is scheduled to be called.

If it is to update at a particular interval, the function should
calculate the milliseconds to the next full intervale and call the
function via setTimeout very soon after that (say 20 ms for a 1 second
timer). So the function only needs to run once per scond for a timer
with one second resolution.

If the resolution is 0.1 seconds, then schedule it to run say 10ms
after the next 100 ms interval so it runs about 10 times per second.
If system load is heavy and it misses an interval, it will appear to
skip but there is nothing you can do about that.

Not at all.

The CPU use will be (roughly) a function of how often it is called, so
calling it less often should use less CPU.
 
E

Evertjan.

Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:
On 21 Feb 2012 23:27:08 GMT, "Evertjan."

[snip]
What is "busy wait"??

Busy wait is when a process consumes CPU time to implement a
wait. One can delay with a for loop (busy wait) or a call to sleep()
(not busy wait).

Inconsequenttial in the case of setTimeout()
Well, there is a loop being executed over and over. That is why
my comment about approaching busy wait.

You are WRONG in the case of Javascript [yes, we know Thomas] and
setTimeout().

There is NO wait-loop here, Javascript execution finishes.

A new Javascript execution is triggered by the CPU-interrupt routine, in
itself an interrupt of a loop on the microcode level, but one that must run
anyway, since the CPU is only idle if the machine is switched of.

Even waitloops in other compilers [or interpreters?] should use a short
sleeps in the loop to minimize CPU cycle-grabbing, Javascript has no need
for wait loops.
 
G

Gene Wirchenko

Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:
[snip]
Well, there is a loop being executed over and over. That is why
my comment about approaching busy wait.

You are WRONG in the case of Javascript [yes, we know Thomas] and
setTimeout().

There is NO wait-loop here, Javascript execution finishes.

I stated that there was a loop, not that there was a wait-loop.

[snip]

Sincerely,

Gene Wirchenko
 
Ad

Advertisements

E

Evertjan.

Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:
Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:
[snip]
Well, there is a loop being executed over and over. That is why
my comment about approaching busy wait.

You are WRONG in the case of Javascript [yes, we know Thomas] and
setTimeout().

There is NO wait-loop here, Javascript execution finishes.

I stated that there was a loop, not that there was a wait-loop.

Same thing, you are wrong in thinking that, there is no loop made.

In other worde sthere is no polling to see if the right time has come,
the right time is when the O.S. interupt fires.

There is no Javascript execution till triggered by the operating system,
so there are no CPU-cycles used by the programme.

[snip]

Sincerely,

Gene Wirchenko
 
Ad

Advertisements

G

Gene Wirchenko

Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:
Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:
[snip]

Well, there is a loop being executed over and over. That is why
my comment about approaching busy wait.

You are WRONG in the case of Javascript [yes, we know Thomas] and
setTimeout().

There is NO wait-loop here, Javascript execution finishes.

I stated that there was a loop, not that there was a wait-loop.

Same thing, you are wrong in thinking that, there is no loop made.

Sure there is. The sequence that sets the timeout is repeatedly
executed.
In other worde sthere is no polling to see if the right time has come,
the right time is when the O.S. interupt fires.

There is no Javascript execution till triggered by the operating system,
so there are no CPU-cycles used by the programme.

I know that. That is what makes it not a busy-wait.

Sincerely,

Gene Wirchenko
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top