Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to write a browser based timer

Reply
Thread Tools

How to write a browser based timer

 
 
Cal Who
Guest
Posts: n/a
 
      02-21-2012
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.


 
Reply With Quote
 
 
 
 
Scott Sauyet
Guest
Posts: n/a
 
      02-21-2012
" Cal Who" wrote:
> 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
 
Reply With Quote
 
 
 
 
Gene Wirchenko
Guest
Posts: n/a
 
      02-21-2012
On Tue, 21 Feb 2012 13:04:24 -0800 (PST), Scott Sauyet
<(E-Mail Removed)> wrote:

[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
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      02-21-2012
Gene Wirchenko wrote on 21 feb 2012 in comp.lang.javascript:

> On Tue, 21 Feb 2012 13:04:24 -0800 (PST), Scott Sauyet
> <(E-Mail Removed)> wrote:
>
> [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


>
> Assuming it exists, what is the third way that works well?
>
> Sincerely,
>
> Gene Wirchenko




--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Gene Wirchenko
Guest
Posts: n/a
 
      02-21-2012
On 21 Feb 2012 22:40:08 GMT, "Evertjan."
<(E-Mail Removed)> wrote:

>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
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      02-21-2012
Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:

> On 21 Feb 2012 22:40:08 GMT, "Evertjan."
> <(E-Mail Removed)> wrote:
>
>>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.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Gene Wirchenko
Guest
Posts: n/a
 
      02-22-2012
On 21 Feb 2012 23:27:08 GMT, "Evertjan."
<(E-Mail Removed)> wrote:

[snip]

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

>
>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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      02-22-2012
On Feb 22, 8:40*am, "Evertjan." <(E-Mail Removed)> wrote:
> Gene Wirchenko wrote on 21 feb 2012 in comp.lang.javascript:
> > On Tue, 21 Feb 2012 13:04:24 -0800 (PST), Scott Sauyet
> > <(E-Mail Removed)> wrote:


[snip]

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


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.

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


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.


> > * * *Following the clock will be somewhat more CPU-intensive.

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


--
Rob
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      02-22-2012
Gene Wirchenko wrote on 22 feb 2012 in comp.lang.javascript:

> On 21 Feb 2012 23:27:08 GMT, "Evertjan."
> <(E-Mail Removed)> wrote:
>
> [snip]
>
>>> (I am leery of anything approaching busy wait, because it can
>>> really suck up the CPU time.)

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

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


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.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Gene Wirchenko
Guest
Posts: n/a
 
      02-22-2012
On 22 Feb 2012 15:41:57 GMT, "Evertjan."
<(E-Mail Removed)> wrote:

>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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
I know about the shutdown timer, is there a "switch on" timer... Mal Carter Computer Support 3 01-12-2008 01:58 AM
page timer, or redirect timer Simon ASP .Net 1 11-04-2005 07:14 PM
System.Timers.Timer/System.Threading.Timer Not Firing At All on Dev Server james.e.coleman@gmail.com ASP .Net 1 02-22-2005 09:41 PM
System.Timers.Timer vs. System.Threading.Timer Kelsang Wangchuk ASP .Net 0 07-31-2003 04:28 PM



Advertisments