setTimeout and Firefox...

[scuniverse]

Hi,

I've looking to a solution to this problem but it seems there's none
to it, or if there's one I'm yet to find it.

Interesting enough the setTimeout issues and FF seem to go back to FF
1.x, they are fixed or so it seems but I have FF 2.0.0.11 and I have
the same good old flicker, it works fine under IE...

Here my problem I have a page with an .x3d object (validates xhtml 1.1
on the W3C) and a Javascript clock that is updated every second, the
problem is that the .x3d player (Flux player plugin for FF) flicks
every time the javascript clock updates, it's more annoying than
really painless but if I can fix it all the merrier.

Is there any other way to make a clock that will update every second
without setTimeout ?

//Function Time
function t() {

var bxx = document.getElementById('stime');
stoday = pp;
intH = stoday.getHours();
intM = stoday.getMinutes();
intS = stoday.getSeconds();

if (intH < 10) {
h = "0"+intH;
}else{h = intH;}

if (intM < 10) {
m = "0"+intM;
}else{m = intM;}

if (intS < 10) {
s = "0"+intS;
}else{s = intS;}

bxx.innerHTML=h+":"+m+":"+s;
stoday.setTime(stoday.getTime()+1000);

var ltime = document.getElementById('ltime');
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();

if (intHours < 10) {
Hours = "0"+intHours;
}else{Hours = intHours;}

if (intMinutes < 10) {
minutes = "0"+intMinutes;
}else{minutes = intMinutes;}

if (intSeconds < 10) {
seconds = "0"+intSeconds;
}else{seconds = intSeconds;}

timeString = Hours+":"+minutes+":"+seconds;

ltime.innerHTML = timeString;

window.setTimeout("t();", 1000);
}


And here are the lines where the 2 "times" are shown:

<span class="topic_1">Local Time:</span>
<div id="ltime">0</div>
<span class="topic_1">Server Time:</span>
<div id="stime">0</div>
<script type="text/javascript"> pp=new
Date(2008,01-1,03,21,55,54);t();</script>

The new date is given by a PHP call and it's the server time.

This is the webpage I speak of,

http://game.scuniverse.net/3d_populated.php

Thanks for your time

Marco

PS: If anything looks bad on my Javascript don't restrain yourself
from saying it

 

[RobG]

Hi,

I've looking to a solution to this problem but it seems there's none
to it, or if there's one I'm yet to find it.

Interesting enough the setTimeout issues and FF seem to go back to FF
1.x, they are fixed or so it seems but I have FF 2.0.0.11 and I have
the same good old flicker, it works fine under IE...

I don't think the issue has anything to do with setTimeout, it is more
likely related to innerHTML.

Here my problem I have a page with an .x3d object (validates xhtml 1.1
on the W3C) and a Javascript clock that is updated every second, the

No it's not, but more later...

problem is that the .x3d player (Flux player plugin for FF) flicks
every time the javascript clock updates, it's more annoying than
really painless but if I can fix it all the merrier.

Is there any other way to make a clock that will update every second
without setTimeout ?
setInterval?


//Function Time
function t() {

        var bxx = document.getElementById('stime');
                stoday = pp;
                intH = stoday.getHours();
                intM = stoday.getMinutes();
                intS = stoday.getSeconds();

As discussed recently, you are much better off to keep variables local
where possible. It seems you are depending on stoday and pp being
global, so at least:

stoday = pp;
var bxx = document.getElementById('stime'),
h = stoday.getHours(),
m = stoday.getMinutes(),
s = stoday.getSeconds();

        if (intH < 10) {
     h = "0"+intH;
        }else{h = intH;}

        if (intM < 10) {
     m = "0"+intM;
        }else{m = intM;}

        if (intS < 10) {
     s = "0"+intS;
        }else{s = intS;}

All of that could be replaced with a simple function:

function padZ(n){return (n<10)? '0'+n:''+n;}

and then...

var bxx = document.getElementById('stime'),
h = padZ(stoday.getHours()),
m = padZ(stoday.getMinutes()),
s = padZ(stoday.getSeconds());

        bxx.innerHTML=h+":"+m+":"+s;

Use a DOM method:

bxx.firstChild.data = h + ":" + m + ":" + s;


Though note that in IE bxx must have some content initially, otherwise
it won't have a firstChild (you currently give it the text "0") and
the script will error.

        stoday.setTime(stoday.getTime()+1000);

        var ltime = document.getElementById('ltime');
        today = new Date();
    intHours = today.getHours();
    intMinutes = today.getMinutes();
    intSeconds = today.getSeconds();

    if (intHours < 10) {
     Hours = "0"+intHours;
    }else{Hours = intHours;}

    if (intMinutes < 10) {
     minutes = "0"+intMinutes;
    }else{minutes = intMinutes;}

    if (intSeconds < 10) {
     seconds = "0"+intSeconds;
    }else{seconds = intSeconds;}

    timeString = Hours+":"+minutes+":"+seconds;

    ltime.innerHTML = timeString;

        window.setTimeout("t();", 1000);

setTimeout is not guaranteed to run in *exactly* 1000ms, it will run
as soon after that delay as it can. Therefore, your clock will skip 2
seconds from time to time, more (and more often) if the processor is
busy. You are better to see how much time of the current second is
left and schedule it to run about the middle of the next second.

Here is a modified version:

function changeText(el, t) {
el.firstChild.data = t;
}

function padZ(n){return (n<10)? '0'+n:''+n;}

function t() {
stoday = pp;
var bxx = document.getElementById('stime'),
h = padZ(stoday.getHours()),
m = padZ(stoday.getMinutes()),
s = padZ(stoday.getSeconds());

bxx.firstChild.data = h + ":" + m + ":" + s;
stoday.setTime(stoday.getTime()+1000);

var ltime = document.getElementById('ltime'),
today = new Date(),
h = padZ(today.getHours()),
m = padZ(today.getMinutes()),
s = padZ(today.getSeconds());
ltime.firstChild.data = h + ":" + m + ":" + s;

// Estimate when to call it next, about 50ms after
// next whole second
var ms = today.getMilliseconds();
var lag = 1050 - ms;

window.setTimeout("t();", lag);
}

PS: If anything looks bad on my Javascript don't restrain yourself
from saying it

There are other code patterns that will remove all the global
variables if you want.

 

[scuniverse]

Thanks for your reply, I tried your solution and it still flicked but
at least it discarded the Javascript as the source of the problem.

After that I fought around with the X3D plugins (besides Flux all the
other are a pain to use) with no conclusion I moved to the next
target and removed the CSS style and now it works with no flicks, the
object tag isn't mentioned on the style but something else is
affecting it... maybe I should have started by eliminating the CSS in
the first place.

Anyway thanks for your insight with out it I would still be thinking
it was a Javascript/FF problem.


Marco

 

[Dr J R Stockton]

In comp.lang.javascript message <f4f6ebec-d1a7-4f4d-8a70-f402f020b077@i1
2g2000prf.googlegroups.com>, Thu, 3 Jan 2008 18:35:48, RobG

On Jan 4, 7:41 am, "(e-mail address removed)" <[email protected]>
wrote:

function padZ(n){return (n<10)? '0'+n:''+n;}

// That should only be used when, as here, it is certain that n >= 0.

DateObject.toString().match(/\d\d:\d\d:\d\d/) gives the desired string
in at least some browsers here, but would not work if .toString gave
am/pm. Does that ever happen?

setTimeout is not guaranteed to run in *exactly* 1000ms, it will run
as soon after that delay as it can. Therefore, your clock will skip 2
seconds from time to time, more (and more often) if the processor is
busy.

Saying "skip one second" *might* be better. My tests (<js-date0.htm>,
foot) indicate that, with XP, "will skip" is too strong; it would only
lose time when I shook the window rather energetically. So your advice
is good, but is less obviously necessary than it used to be.

You are better to see how much time of the current second is
left and schedule it to run about the middle of the next second.

var lag = 1050 - ms;

Some middles are in funny places <g>.



In <js-datex.htm>, with Opera 9.25, "List Offset Changes" can now safely
be pressed in Brisbane (it always was OK in Sydney).

I've been trying Safari 3.0.4 in XP.
There, new Date("2222/11/11 +0300") fails. The antepenultimate colon
that it wants is unacceptable to IE6/7. FF2 & Op9 accept either form.
ISTM that, when a Date Object holds NaN, .toString() gives "Invalid
Date" rather than "NaN", but ICBW.