CODEWITHSUNDEEP
javascriptjqueryoopconstructorcallback
Jhonnatan Gonzalez Rodriguez
Jhonnatan Gonzalez Rodriguez

Reputation: 573

Passing a callback to method of an Object

I have an Object constructor who manage a lot of animations I have on a website, i will like to pass a parameter to the start function, this parameter is a callback, like a oncomplete is what I want to achieve because in some cases when the animation stop I want some elements to appear. The problem is i pass the callback but nothing happens and I really dont know why the function is not taking the parameters, I leave you some code I hope someone can help me.

// CONSTRUCTOR WHO MANAGE THE ANIMATIONS FOR THE WEBSITE
        function SpriteAnimation(frameWidth, spriteWidth, spriteElement, shouldLoop, frameRate){
            this.frameWidth = frameWidth;
            this.spriteWidth = spriteWidth;
            this.selector = document.getElementById(spriteElement);
            this.shouldLoop = shouldLoop ;
            this.curPx = 0;
            this.frameRate = frameRate;
        }

        SpriteAnimation.prototype.start = function(callback){

            this.selector.style.backgroundPosition = "-" + this.curPx + "px 0px";
            this.curPx += this.frameWidth;

            if (this.curPx < (this.spriteWidth - this.frameWidth)){
                setTimeout(this.start.bind(this), this.frameRate);
            } else if (this.shouldLoop) {
                this.curPx = 0;
                this.start();

                if(callback && typeof callback === "function"){
                    callback();
                }
            }

        };

Now the pice of code I am using to call the callback:

var letter = new SpriteAnimation(789.695652, 18163, "letter", false, 53.3);

letter.start(function(){
    $("#form-field").fadeIn();
});

I don't know if it's probably that I am not passing the context or something like that but actually I am learning javascript so don't understand really well how it works with objects. Before I just had a bunch of variables and functions per animation.

Upvotes: 1

Views: 123

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

In your case, this.shouldLoop is false. It never enters the else if

var letter = new SpriteAnimation(789.695652, 18163, "letter", false, 53.3);

Your forth parameter (false) is assigned to shouldLoop

else if (this.shouldLoop) { // never steps into this because this.shouldLoop is false
                this.curPx = 0;
                this.start();

                if(callback && typeof callback === "function"){
                    callback();
                }
            }

Upvotes: 2

Related Questions