Question

你好我使用对象构造函数来管理一些动画，在某些情况下我想在动画完成时传递一个回调来显示一些其他元素。问题是如果在if句子中我记录了一种回调它是一个有效的函数，但当我在if语句中做日志时如果总是未定义的，我很感激如果有人可以帮我这个，我也留下了一块代码，所以你们可以检查出来。

// 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.curPx > (this.spriteWidth - this.frameWidth)){
        console.log(typeof callback);
    }else if(this.shouldLoop){
        this.curPx = 0;
        this.start();
    }
};

稍后在代码中我实例化并运行start：

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

letter.start(function(){
    console.log("hola");
});

Answer 1

您没有通过setTimeout中的回调，我建议您这样做：

    setTimeout(function(){
        this.start(callback);
    }, this.frameRate);

Answer 2

一种可能性是setTimeout

调用start函数

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((function(){
            this.start(callback)
        }).bind(this), this.frameRate);
    }else if (this.curPx > (this.spriteWidth - this.frameWidth)){
        console.log(typeof callback);
    }else if(this.shouldLoop){
        this.curPx = 0;
        this.start();
    }
};

为什么回调未定义？

2 个答案: