Javascript - Prototype не читает конструктор переменных - PullRequest
Новая
       6

Javascript - Prototype не читает конструктор переменных

0 голосов
/ 24 марта 2012

У меня проблемы с доступом к общедоступным переменным из объекта в прототипированной функции ... из того, что я прочитал, это должно сработать, но, возможно, кто-то с более опытным взглядом может указать, что я делаю неправильно.

В этом я пытаюсь написать свой собственный объект анимации, с самостоятельным удалением, который может использовать другой менеджер.обратный вызов - это команда, записанная в виде строки, x & y - начальная позиция, x2, & y2 - конечная позиция, время - время в секундах, а element - элемент, который перемещается.doTime является результатом функции эталонного теста, которая выполняется при загрузке страницы для правильной установки смещения timeOut.

Я могу создать рабочую версию с внутренними функциями, но так как этот объект создается несколько раз, я хотел создать прототипфункция для повышения скорости создания.

Тест показывает, что ни один из this.vars не читает в функции-прототипе. 

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);
    }
};

Я использую такую ​​функцию: 

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

любая помощь будет принята с благодарностью .... Заранее спасибо.

1 Ответ

0 голосов
/ 25 марта 2012

у вас, вероятно, возникнут проблемы с областями видимости при вызове setInterval,

, потому что setInterval будет вызываться через указанный интервал и с областью действия объекта окна, поэтому он не сможет получить доступ к данным объекта, используя это,

, поэтому вам нужно передать ссылку на объект, используя локальную переменную, вы можете достичь этого, используя замыкания в setInterval, как это 

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

, поэтому ваш окончательный код будет выглядеть так 

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);
    }
};
...