Javascript对象访问其属性

Question

I am trying to create an object in javascript that has an animation run which calls another method when it finishes.

function panel_manager() {
    this.animating = false;

    this.doAnimate = function (nPanel) {
        //if we're still moving panels, do nothing
        if(this.animating) return;

        this.animating = true;

        //enlarge new panel
        $("#panel" + this.focusedPanel).animate({width:"115px"},1000, this.endAnim);
    }

    this.endAnim = function () { alert("called"); this.animating = false; }
}

A whole lot has been cut for brevity and this code does work when it isn't inside an object and uses global variables. The alert runs, but animating isn't changing.

Answer 1

variables.

function panel_manager() {
    var that = this;
    this.animating = false;
    this.doAnimate = function (nPanel) {
        if(this.animating) return;
        this.animating = true;
        $("#panel" + this.focusedPanel).animate({width:"115px"},1000, that.endAnim);
    }
    this.endAnim = function () { alert("called"); that.animating = false; }
}

Answer 2

Inside of this.doAnimate add a $.proxy.

var callback = $.proxy( this.endAnim, this );

$("#panel" + this.focusedPanel).animate({width:"115px"},1000, callback);

Basically the problem is you lose your this value when you assign it to a callback like this. proxy will make sure the function is called with the proper this .

Cheers!