object callback function is undefined Javascript

Question

i have the following object

function AnimatedObject(object)
{
    this.object = object;
    /*
        Functions
     */
    this.fadeOutAnimation = fadeOutAnimation;
    this.objectToggle = objectToggle;
    this.objectClick = objectClick;
}
function fadeOutAnimation()
{
    this.object.animate({
        opacity: 0.25,
        left: "+=150",
        height: "toggle"
    }, 2500, function() {
        this.objectToggle();
    });

}

function objectToggle()
{
    this.object.toggle();
}

From inside my animate function i am called this.objectToggle();

However when it completes the animation i get undefined is not a function

I am quite certian that it is because of the inner callback function that does not have a reference to the object

My question is how can i give it a reference to my object and thereby allow me to call its functions from inside the callback function?

James Allardice · Accepted Answer · 2014-12-22 12:17:39Z

1

Bind the function to the right context:

function fadeOutAnimation()
{
    this.object.animate({
        opacity: 0.25,
        left: "+=150",
        height: "toggle"
    }, 2500, function() {
        this.objectToggle();
    }.bind(this));

}

Or just store a reference to this:

function fadeOutAnimation()
{
    var that = this;
    this.object.animate({
        opacity: 0.25,
        left: "+=150",
        height: "toggle"
    }, 2500, function() {
        that.objectToggle();
    });

}

answered Dec 22, 2014 at 12:17

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A.B · Accepted Answer · 2014-12-22 12:21:34Z

1

Inside animate function this refers to the animating div and context of the this has changed. you can bind this or can save reference earlier in the code

function fadeOutAnimation()
{
    that = this;
    this.object.animate({
        opacity: 0.25,
        left: "+=150",
        height: "toggle"
    }, 2500, function() {
        that.objectToggle();
    });

}

answered Dec 22, 2014 at 12:21

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Collectives™ on Stack Overflow

object callback function is undefined Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related