在javascript中使用setTimeout来做简单的动画

Question

我正在使用 setTimeout 在 Javascript 中创建动画，但它似乎不起作用。仅执行动画的第一个动作，不再执行后续动作。

我在两台不同的笔记本电脑上使用 Firefox 进行了尝试，其中一台没有抛出任何错误，但另一台显示 self.animateCallback 不是函数。当我尝试 diff 方法时，我还看到其他错误，例如说我的超时函数无用或“编译后运行”。似乎没有让它发挥作用。我尝试了 "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();
},

Answer 1

我感觉问题与 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;
    }
},

Answer 2

我认为错误在于其他一些代码正在将 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
    }
}

Answer 3

尝试将匿名函数传递给 setTimeout，希望

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

它会有所帮助。