Loading ...
Sorry, an error occurred while loading the content.
 

Animation utility seems to lose scope when using setTimeout

Expand Messages
  • James Bennett
    I m working on porting an old bit of JS over to YUI, which takes a set of DIVs in a specified container and basically cross-fades through each of them (so one
    Message 1 of 4 , Dec 12, 2006
      I'm working on porting an old bit of JS over to YUI, which takes a set
      of DIVs in a specified container and basically cross-fades through
      each of them (so one fades out, the next fades in, etc.). The code is
      fairly straightforward, just a class which loops through the DIVs in
      an HTML element passed to it, handling the business of setting up and
      timing the fades.

      Because each DIV needs to display for a set amount of time, I'm using
      window.setTimeout to pause for an appropriate period before kicking
      off the initial fade-out animation (and each subsequent fade-out), but
      doing this appears to make the animation lose its scope.

      Using this results in "this.isAnimated is not a function":

      this.currentAnim = new Anim(this.divs[this.currentDiv],
      { opacity: { to: 0 }}, 1);
      var timer = window.setTimeout(this.currentAnim.animate, this.duration);

      Debugging in Firebug reveals that within the animate() method, 'this'
      is bound to the global Window object.

      Using this, on the other hand, works fine (but gets me nowhere since I
      need to pause before the animation):

      this.currentAnim = new Anim(this.divs[this.currentDiv],
      { opacity: { to: 0 }}, 1);
      this.currentAnim.animate();

      Is this buggy behavior in the animation utility, or have I missed
      something obvious here -- entirely possible, the way my day's been
      going... ;)


      --
      "May the forces of evil become confused on the way to your house."
      -- George Carlin
    • Nige White
      All functions lose their scope when you send a *function reference* into another function. This is nothing to do with the Animation object. setTimeout recieves
      Message 2 of 4 , Dec 13, 2006
        All functions lose their scope when you send a *function reference* into
        another function. This is nothing to do with the Animation object.

        setTimeout recieves a function pointer. No information as to what scope
        to run that function in. You must provide that.

        There should be a FAQ somewhere with this as the number 1 question!

        James Bennett wrote:

        > I'm working on porting an old bit of JS over to YUI, which takes a set
        > of DIVs in a specified container and basically cross-fades through
        > each of them (so one fades out, the next fades in, etc.). The code is
        > fairly straightforward, just a class which loops through the DIVs in
        > an HTML element passed to it, handling the business of setting up and
        > timing the fades.
        >
        > Because each DIV needs to display for a set amount of time, I'm using
        > window.setTimeout to pause for an appropriate period before kicking
        > off the initial fade-out animation (and each subsequent fade-out), but
        > doing this appears to make the animation lose its scope.
        >
        > Using this results in "this.isAnimated is not a function":
        >
        > this.currentAnim = new Anim(this.divs[this.currentDiv],
        > { opacity: { to: 0 }}, 1);
        > var timer = window.setTimeout(this.currentAnim.animate, this.duration);
        >
        > Debugging in Firebug reveals that within the animate() method, 'this'
        > is bound to the global Window object.
        >
        > Using this, on the other hand, works fine (but gets me nowhere since I
        > need to pause before the animation):
        >
        > this.currentAnim = new Anim(this.divs[this.currentDiv],
        > { opacity: { to: 0 }}, 1);
        > this.currentAnim.animate();
        >
        > Is this buggy behavior in the animation utility, or have I missed
        > something obvious here -- entirely possible, the way my day's been
        > going... ;)
        >
        > --
        > "May the forces of evil become confused on the way to your house."
        > -- George Carlin
        >
        >
        > ______________________________________
        > - Checked for viruses by Messagelabs.



        _______________________________________________________________________
        This message has been checked for all known viruses. Virus scanning
        provided by Messagelabs http://www.messagelabs.com For more information
        e-mail : hostmaster@...
      • randomjuju
        There are a couple of ways to get around this. The simplest, in my experience, is to use a wrapper with a closure. For example: /* scopeObj should be
        Message 3 of 4 , Dec 13, 2006
          There are a couple of ways to get around this. The simplest, in my
          experience, is to use a wrapper with a closure. For example:

          /* scopeObj should be whatever you want "this" to refer to. */
          var scopeObj = this;
          setTimeout(function() { scopeObj.doSomething(); }, 0);

          Does that help?

          -Jon

          --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@...> wrote:
          >
          > All functions lose their scope when you send a *function reference*
          into
          > another function. This is nothing to do with the Animation object.
          >
          > setTimeout recieves a function pointer. No information as to what scope
          > to run that function in. You must provide that.
          >
          > There should be a FAQ somewhere with this as the number 1 question!
          >
          > James Bennett wrote:
          >
          > > I'm working on porting an old bit of JS over to YUI, which takes a set
          > > of DIVs in a specified container and basically cross-fades through
          > > each of them (so one fades out, the next fades in, etc.). The code is
          > > fairly straightforward, just a class which loops through the DIVs in
          > > an HTML element passed to it, handling the business of setting up and
          > > timing the fades.
          > >
          > > Because each DIV needs to display for a set amount of time, I'm using
          > > window.setTimeout to pause for an appropriate period before kicking
          > > off the initial fade-out animation (and each subsequent fade-out), but
          > > doing this appears to make the animation lose its scope.
          > >
          > > Using this results in "this.isAnimated is not a function":
          > >
          > > this.currentAnim = new Anim(this.divs[this.currentDiv],
          > > { opacity: { to: 0 }}, 1);
          > > var timer = window.setTimeout(this.currentAnim.animate,
          this.duration);
          > >
          > > Debugging in Firebug reveals that within the animate() method, 'this'
          > > is bound to the global Window object.
          > >
          > > Using this, on the other hand, works fine (but gets me nowhere since I
          > > need to pause before the animation):
          > >
          > > this.currentAnim = new Anim(this.divs[this.currentDiv],
          > > { opacity: { to: 0 }}, 1);
          > > this.currentAnim.animate();
          > >
          > > Is this buggy behavior in the animation utility, or have I missed
          > > something obvious here -- entirely possible, the way my day's been
          > > going... ;)
          > >
          > > --
          > > "May the forces of evil become confused on the way to your house."
          > > -- George Carlin
          > >
          > >
          > > ______________________________________
          > > - Checked for viruses by Messagelabs.
          >
          >
          >
          > _______________________________________________________________________
          > This message has been checked for all known viruses. Virus scanning
          > provided by Messagelabs http://www.messagelabs.com For more information
          > e-mail : hostmaster@...
          >
        • James Bennett
          ... Yeah, that eventually clicked. Like I said, long day yesterday (most of it spent writing Python, so the context switch of going from a language where
          Message 4 of 4 , Dec 13, 2006
            On 12/13/06, Nige White <nigelw@...> wrote:
            > setTimeout recieves a function pointer. No information as to what scope
            > to run that function in. You must provide that.

            Yeah, that eventually clicked. Like I said, long day yesterday (most
            of it spent writing Python, so the context switch of going from a
            language where methods automatically get the correct scope to a
            language where they don't took its tool).

            --
            "May the forces of evil become confused on the way to your house."
            -- George Carlin
          Your message has been successfully submitted and would be delivered to recipients shortly.