Question

I am using setTimeout to create animation in Javascript, but it does not seem to work. Only the 1st move of the animation is executed, no subsequent moves.

I tried on two different laptops using Firefox, one doesn’t throw any error, but the one says self.animateCallback is not a function. I also see other errors like saying my timeout function is useless or “compile-and-go” when I tried diff ways. Doesn’t seem to get it working. I tried "function(self){self.animateCallback()}" and "self.animateCallback" (with and without quotes).

The code is below, it is part of a prototype method.

    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

I’ve got a feeling the problem has something to do with the line setTimeout(self.animateCallback..., which is accessing the function through a closure and a property. It should be neater, at least, to do it like this:

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