Flash, Javascript Time Conflict in Internet Explorer

[mudgen]

I have a webpage that has two flash animations running. I also have a
javascript script running that rotates 3 images and fades them in and
out. To do the fading and rotating in javascript I am using the
setInterval function, like this:

setInterval(function () {imageFade()},10);


This works fine in Firefox, but in IE 7, the flash animations slow
down a lot, and the javascript fading/rotation slows down some.

There seems to be a timing conflict in IE 7 between flash and
javascript. Any suggestions on how to fix this in IE 7?

 

[David Mark]

I have a webpage that has two flash animations running. I also have a
javascript script running that rotates 3 images and fades them in and
out. To do the fading and rotating in javascript I am using the
setInterval function, like this:

setInterval(function () {imageFade()},10);

What does this imageFade function look like and why call it a hundred
times per second?

 

[Stevo]

I have a webpage that has two flash animations running. I also have a
javascript script running that rotates 3 images and fades them in and
out. To do the fading and rotating in javascript I am using the
setInterval function, like this:

setInterval(function () {imageFade()},10);

This works fine in Firefox, but in IE 7, the flash animations slow
down a lot, and the javascript fading/rotation slows down some.

There seems to be a timing conflict in IE 7 between flash and
javascript. Any suggestions on how to fix this in IE 7?

One thing that might be happening is that calling your imageFade
function every 10 milliseconds isn't leaving enough time for everything
to run. You could try making some measurements. Make a note of the time
at the start of your imageFade and also at the end. You might find it's
close to 10ms. It's for this reason that I never use setInterval with a
short time. For me, if the time is less than a second, then I usually
prefer to use setTimeout, and put a setTimeout at the end of your
function for the next call. By using setTimeout, you're guaranteeing a
certain amount of "free time" until the next call. There's no perfect
solution, the browser environment is a controlled sandbox and things run
only as fast as allowed when the overhead of that environment being
managed is also accounted for.

 

[Thomas 'PointedEars' Lahn]

I have a webpage that has two flash animations running. I also have a
javascript script running that rotates 3 images and fades them in and
out.
Ouch.

To do the fading and rotating in javascript I am using the
setInterval function, like this:

setInterval(function () {imageFade()},10);

No OS timer ticks in 10-millisecond intervals.

This works fine in Firefox, but in IE 7, the flash animations slow
down a lot, and the javascript fading/rotation slows down some.

There seems to be a timing conflict in IE 7 between flash and
javascript. Any suggestions on how to fix this in IE 7?

Don't use setInterval() for time-critical applications; use setTimeout()
instead. Google is your friend. [psf 6.1]


PointedEars

 

[mudgen]

What does this imageFade function look like and why call it a hundred
times per second?

the imageFade function looks like this:

function imageFade(){

if (image_action == "increase") {
if(image_opacity <= 8)
image_opacity += 0.04;
else {
image_action = "decrease";
}
}

if (image_action == "decrease") {
if(image_opacity >= .1)
image_opacity -= 0.06;
else {
image_action = "increase";
image_num++;
setImage(image_num);
if (image_num >= image_total)
image_num = -1;
}
}
document.getElementById("image_alpha").style.KhtmlOpacity =
image_opacity;
document.getElementById("image_alpha").style.MozOpacity =
image_opacity;
document.getElementById("image_alpha").style.opacity = image_opacity;
document.getElementById("image_alpha").style.filter =
'alpha(opacity=' + 100 * image_opacity + ')';
}
setInterval(function () {imageFade()},10);

 

[David Mark]

the imageFade function looks like this:

function imageFade(){

if (image_action == "increase") {
if(image_opacity <= 8)

What does that mean?

image_opacity += 0.04;
else {
image_action = "decrease";
}
}

if (image_action == "decrease") {
if(image_opacity >= .1)
image_opacity -= 0.06;
else {
image_action = "increase";
image_num++;
setImage(image_num);
if (image_num >= image_total)
image_num = -1;
}
}
document.getElementById("image_alpha").style.KhtmlOpacity =
image_opacity;
document.getElementById("image_alpha").style.MozOpacity =
image_opacity;
document.getElementById("image_alpha").style.opacity = image_opacity;
document.getElementById("image_alpha").style.filter =
'alpha(opacity=' + 100 * image_opacity + ')';}

You just wiped out any other filters.

setInterval(function () {imageFade()},10);

Again, why 100 times per second? Adjust the opacity increment amd try
it at 60 times per second. Can your eyes perceive any difference?
Then try it at 30.

As for efficiency, look at how many times you queried for
image_alpha. Also, see my recently posted set_opacity example as you
are doing four times as much work as needed to set the opacity of the
element.

 

[mudgen]

What does that mean?





You just wiped out any other filters.




Again, why 100 times per second? Adjust the opacity increment amd try
it at 60 times per second. Can your eyes perceive any difference?
Then try it at 30.

As for efficiency, look at how many times you queried for
image_alpha. Also, see my recently posted set_opacity example as you
are doing four times as much work as needed to set the opacity of the
element.

Thanks, where is your set_opacity example?

 

[mudgen]

What does that mean?





You just wiped out any other filters.




Again, why 100 times per second? Adjust the opacity increment amd try
it at 60 times per second. Can your eyes perceive any difference?
Then try it at 30.

As for efficiency, look at how many times you queried for
image_alpha. Also, see my recently posted set_opacity example as you
are doing four times as much work as needed to set the opacity of the
element.

You just wiped out any other filters.

By default are there filters?

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn said the following on 9/28/2007 4:18 PM:

You think that 2 flash apps animating and an image slide show is "time
critical"?

If the frame length of the animation should be 10 milliseconds, yes.


PointedEars

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>, Fri,

No OS timer ticks in 10-millisecond intervals.

That's rather a strong statement; are you sure that you know about EVERY
OS - or even every one that supports Javascript?

ISTR reading that the Win98/WinXP timer, while running by default at
64Hz, can be set by a program to run at other speeds; and that the new
speed will be maintained whilst that other program continues to run. I
don't assert that as a proven fact, though.

 

[Thomas 'PointedEars' Lahn]

In comp.lang.javascript message <[email protected]>, Fri,


That's rather a strong statement; are you sure that you know about EVERY
OS - or even every one that supports Javascript?

ISTR reading that the Win98/WinXP timer, while running by default at
64Hz, can be set by a program to run at other speeds; and that the new
speed will be maintained whilst that other program continues to run. I
don't assert that as a proven fact, though.

OK, let's just say that I find it unlikely that any HTML UA ticks that fast
or that such low values are even implemented by setTimeout(). Given the
current Gecko code and the Bugzilla material found so far, I have to assume
that the earliest implementations already normalized the time value to
prevent the OS from hanging:

https://bugzilla.mozilla.org/show_bug.cgi?id=123273


PointedEars

 

[David Mark]

[snip]

By default are there filters?

Not by default.

 

[mudgen]

[snip]

By default are there filters?

Not by default.

My question is, why does it work fine in Firefox and not in IE? How
can I make it work in IE too? I switched setInterval to setTimeout,
but there is not difference in performance in IE.

 

[Thomas 'PointedEars' Lahn]

My question is, why does it work fine in Firefox and not in IE? How
can I make it work in IE too? I switched setInterval to setTimeout,
but there is not difference in performance in IE.

That would depend on the code you are using now, which you have not posted.


PointedEars

 

[mudgen]

That would depend on the code you are using now, which you have not posted.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

I posted it here: http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/2927e5d1b88beb4a/#

 

[mudgen]

That would depend on the code you are using now, which you have not posted.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

Thanks a lot for your help. I figured some stuff out. Like instead
of just calling setTimeout with 10 milliseconds, also call it with
4000 seconds for when I want a picture to stay there for awhile
without fading.