在javascript中使用setTimeout制作简单动画

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

我使用Firefox在两台不同的笔记本电脑上进行了尝试，其中一台没有抛出任何错误，但另一台说

self.animateCallback不是一个函数

。我还看到了其他错误，比如说我的超时函数没有用，或者在尝试不同的方法时“编译并运行”。似乎无法让它工作。我尝试了

“函数（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();
},

增量：函数（增量、目标、勾号）{ var self=这个； self.animateCallback=函数（） { var done=Math.abs（self.currValue-target）尝试将匿名函数传递给

setTimeout

，如

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

---

希望能有所帮助。

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

增量：函数（增量、目标、勾号）{ var self=这个； var animateCallback=函数（） { var done=Math.abs（self.currValue-target）我认为错误在于其他一些代码正在将

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

---

这不是必需的，也不会有什么区别，因为

self.animateCallback（）

已经是一个函数。不需要使用

setTimeout（）的匿名函数

。我们需要查看更多的代码才能知道问题出在哪里。很明显，有些东西弄乱了这个，self或self.animateCallback，因为如果其中一个没有弄乱，代码就不应该有您报告的问题。我也参考了tt行。在我们的建议中，似乎停止动画是不必要的。我所做的是ad最终做了一些事情，比如self.timer=setTimeout（函数（obj）{obj.animateCallback.call（）}；），tick，self）；