используя setTimeout в JavaScript, чтобы сделать простую анимацию - PullRequest
Новая
       2

используя setTimeout в JavaScript, чтобы сделать простую анимацию

2 голосов
/ 03 ноября 2011

Я использую setTimeout для создания анимации в Javascript, но, похоже, это не работает.Выполняется только 1-й ход анимации, никаких последующих ходов нет.

Я пробовал на двух разных ноутбуках использовать Firefox, один не выдает никакой ошибки, но один говорит self.animateCallback is not a function.Я также вижу другие ошибки, например, когда я говорю, что моя функция тайм-аута бесполезна или «компилируй и работай», когда я пробовал разные способы.Похоже, это не работает.Я пробовал "function(self){self.animateCallback()}" и "self.animateCallback" (с кавычками и без).

Код ниже, это часть метода-прототипа. 

    increment : function(incr, target, tick) {
    var self = this;

    self.animateCallback = function()
    {
        var done = Math.abs(self.currValue - target) < Math.abs(incr);
        if(!self.animateCallback || done) {

            if(done) {
                self.updateAngle(self.currValue/self.maxValue);
                self.stopAnimation(); //just setting animateCallback to null
            }
        }
        else
        {
            self.updateAngle((self.currValue+incr)/self.maxValue);
            setTimeout(self.animateCallback, tick);
        }

    }
    self.animateCallback.call();
},

Ответы [ 3 ]

3 голосов
/ 03 ноября 2011

У меня ощущение, что проблема связана со строкой setTimeout(self.animateCallback..., которая обращается к функции через замыкание и свойство.Это должно быть аккуратнее, по крайней мере, сделать это так: 

increment : function(incr, target, tick) {
    var self = this;

    var animateCallback = function()
    {
        var done = Math.abs(self.currValue - target) < Math.abs(incr);
        if(done) {
            self.updateAngle(self.currValue/self.maxValue);
            self.animateTimeout = null;
        }
        else
        {
            self.updateAngle((self.currValue+incr)/self.maxValue);
            self.animateTimeout = setTimeout(animateCallback, tick);
        }

    }
    animateCallback();
},
stopAnimation: function() {
    if (this.animateTimeout) {
        clearTimeout(this.animateTimeout);
        this.animateTimeout = null;
    }
},
0 голосов
/ 03 ноября 2011

Я думаю, что ошибка в том, что какой-то другой код меняет значение self.animateCallback на что-то другое.В первый раз setTimeout имеет правильное значение для self.animateCallback, но после первого раза значение self.animateCallback изменилось на что-то другое, что не является функцией, но все же не ложное значениетак что !self.animateCallback возвращает false.

Вы можете попробовать изменить выражение if на следующее: 

if((typeof self.animateCallback !== "function") || done) {

    if(done) {
        self.updateAngle(self.currValue/self.maxValue);
        self.stopAnimation(); //just setting animateCallback to null
    }
}
0 голосов
/ 03 ноября 2011

попробуйте передать анонимную функцию setTimeout, например 

setTimeout(function(){ self.animateCallback(); }, tick);

надеюсь, это поможет.

...