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

【问题标题】：using setTimeout in javascript to do simple animation在javascript中使用setTimeout做简单的动画
【发布时间】：2011-11-03 11:39:52
【问题描述】：

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

我在两台不同的笔记本电脑上使用 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();
},

【问题讨论】：

我们需要查看更多代码才能知道问题所在。显然，self 或 self.animateCallback 有问题，因为如果其中一个没有被弄乱，代码不应该有你报告的问题。

标签： javascript settimeout

【解决方案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;
    }
},

【讨论】：

我也指的是 tt 行。在你的建议中，似乎 stopAnimation 不是必需的。我最终所做的是做某事，例如 self.timer = setTimeout(function(obj){obj.animateCallback.call()};), tick, self);

【解决方案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
    }
}

【讨论】：

【解决方案3】：

尝试将匿名函数传递给setTimeout，例如

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

希望它会有所帮助。

【讨论】：

这不是必需的，也不会产生影响，因为self.animateCallback() 已经是一个函数。不需要setTimeout() 的匿名函数。