Javascript - Prototype is not reading constructor variables

Question

I am having issues accessing public variables from an object in a prototyped function... from what I have read, this should work, but perhaps someone with a more experienced eye can point out what I am doing wrong.

In this, I am trying to write my own animation object, with self deletion that another manager can use. callback is a command written as a string, x&y are starting position, x2,&y2 are ending position, time is time in seconds, and element is the element that moves. doTime is the result of a benchmark function that executes on page load to correctly set the timeOut offset.

I can create a working version with inside functions, but as this object is created several times, I was wanting to prototype the function to improve creation speed.

Test show that none of the this.vars are reading within the prototype function.

function circDelta(progress) {
    if (progress < .5)
        return (1 - Math.sin(Math.acos(progress))) / 2
    else
        return (2 - (1 - Math.sin(Math.acos(2*(1-progress))))) / 2
}

function animation(element,x,y,x2,y2,time,callback){
    this.e = element;
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.t = time * 1000;
    this.c = callback;
    this.cT = 0;
    this.id = setTimeout(this.frame, doTime);
}

animation.prototype.frame = function(){
    this.cT+=doTime;
    if(this.cT>=this.t)
    {
        this.e.style.left = this.x2+'px';
        this.e.style.top = this.y2+'px';
        if(typeof this.c === 'function')
            this.c();
    }
    else
    {
        this.e.style.left = ((this.x2-this.x)*circDelta(this.t/this.cT))+this.x+'px';
        this.e.style.top = ((this.y2-this.y)*circDelta(this.t/this.cT))+this.y+'px';
        this.id = setTimeout(this.frame, doTime);
    }
};

I am using the function like this:

this.curr_anim = new animation(hC.menus[0],0,0,0,30,1.5,hC.anim_finished);

any help would be greatly appreciated.... Thank you in advance.

Answer 1

you will probably having scoping issues in setInterval call,

because setInterval will be called after specified interval and with the scope of window object so it will not be able to access object data using this,

so you need to pass reference of object using a local variable, you can achive this by use of closures in setInterval like this

var me = this;
this.id = setTimeout(function() {
    me.frame();
}, doTime);

so your final code will look like this

function circDelta(progress) {
    if (progress < .5)
        return (1 - Math.sin(Math.acos(progress))) / 2
    else
        return (2 - (1 - Math.sin(Math.acos(2*(1-progress))))) / 2
}

function animation(element,x,y,x2,y2,time,callback){
    this.e = element;
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.t = time * 1000;
    this.c = callback;
    this.cT = 0;

    var me = this;
    this.id = setTimeout(function() {
          me.frame();
    }, doTime);
}

animation.prototype.frame = function(){
    this.cT+=doTime;
    if(this.cT>=this.t)
    {
        this.e.style.left = this.x2+'px';
        this.e.style.top = this.y2+'px';
        if(typeof this.c === 'function')
            this.c();
    }
    else
    {
        this.e.style.left = ((this.x2-this.x)*circDelta(this.t/this.cT))+this.x+'px';
        this.e.style.top = ((this.y2-this.y)*circDelta(this.t/this.cT))+this.y+'px';

        var me = this;
        this.id = setTimeout(function() {
             me.frame();
        }, doTime);
    }
};