Flash, Javascript Time Conflict in Internet Explorer

Discussion in 'Javascript' started by mudgen@gmail.com, Sep 28, 2007.

  1. Guest

    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?
    , Sep 28, 2007
    #1
    1. Advertising

  2. David Mark Guest

    On Sep 28, 1:12 pm, "" <> wrote:
    > 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?
    David Mark, Sep 28, 2007
    #2
    1. Advertising

  3. Stevo Guest

    wrote:
    > 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.
    Stevo, Sep 28, 2007
    #3
  4. wrote:
    > 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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Sep 28, 2007
    #4
  5. Guest

    On Sep 28, 10:59 am, David Mark <> wrote:
    > On Sep 28, 1:12 pm, "" <> wrote:
    >
    > > 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?


    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);
    , Sep 28, 2007
    #5
  6. David Mark Guest

    On Sep 28, 4:44 pm, "" <> wrote:
    > On Sep 28, 10:59 am, David Mark <> wrote:
    >
    > > On Sep 28, 1:12 pm, "" <> wrote:

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

    >
    > 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.
    David Mark, Sep 28, 2007
    #6
  7. Guest

    On Sep 28, 2:25 pm, David Mark <> wrote:
    > On Sep 28, 4:44 pm, "" <> wrote:
    >
    >
    >
    > > On Sep 28, 10:59 am, David Mark <> wrote:

    >
    > > > On Sep 28, 1:12 pm, "" <> wrote:

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

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


    Thanks, where is your set_opacity example?
    , Sep 29, 2007
    #7
  8. Guest

    On Sep 28, 2:25 pm, David Mark <> wrote:
    > On Sep 28, 4:44 pm, "" <> wrote:
    >
    >
    >
    > > On Sep 28, 10:59 am, David Mark <> wrote:

    >
    > > > On Sep 28, 1:12 pm, "" <> wrote:

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

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


    > You just wiped out any other filters.


    By default are there filters?
    , Sep 29, 2007
    #8
  9. Randy Webb wrote:
    > Thomas 'PointedEars' Lahn said the following on 9/28/2007 4:18 PM:
    >> wrote:
    >>> 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.

    >
    > 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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Sep 29, 2007
    #9
  10. In comp.lang.javascript message <>, Fri,
    28 Sep 2007 22:18:51, Thomas 'PointedEars' Lahn <>
    posted:
    >
    >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.

    --
    (c) John Stockton, Surrey, UK. ???@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Check boilerplate spelling -- error is a public sign of incompetence.
    Never fully trust an article from a poster who gives no full real name.
    Dr J R Stockton, Sep 29, 2007
    #10
  11. Dr J R Stockton wrote:
    > In comp.lang.javascript message <>, Fri,
    > 28 Sep 2007 22:18:51, Thomas 'PointedEars' Lahn <>
    > posted:
    >> 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.


    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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Sep 29, 2007
    #11
  12. David Mark Guest

    On Sep 28, 8:27 pm, "" <> wrote:

    [snip]

    >
    > By default are there filters?


    Not by default.
    David Mark, Sep 30, 2007
    #12
  13. Guest

    On Sep 29, 4:57 pm, David Mark <> wrote:
    > On Sep 28, 8:27 pm, "" <> wrote:
    >
    > [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.
    , Oct 2, 2007
    #13
  14. wrote:
    > 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Oct 2, 2007
    #14
  15. Guest

    On Oct 1, 4:39 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > wrote:
    > > 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
    > --
    > 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/#
    , Oct 2, 2007
    #15
  16. Guest

    On Oct 1, 4:39 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > wrote:
    > > 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
    > --
    > 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.
    , Oct 2, 2007
    #16
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. cmay
    Replies:
    0
    Views:
    1,113
  2. charles cashion

    css conflict (or html conflict)

    charles cashion, Feb 18, 2009, in forum: HTML
    Replies:
    2
    Views:
    775
    charles cashion
    Feb 18, 2009
  3. Ed Hauptman
    Replies:
    7
    Views:
    992
    Ed Hauptman
    Aug 7, 2009
  4. Chuck
    Replies:
    0
    Views:
    86
    Chuck
    Nov 27, 2003
  5. Replies:
    3
    Views:
    130
Loading...

Share This Page