Question

我正在研究用Javascript编写的倒数计时器。真的很基本。只需使用setInterval作为时间方面。我使用存储函数和变量的原型方法编写它，因此我可以创建一个“类”。

我以这种方式调用代码。

function testTimer() {
    var newTimer = new CDTimer($("#voteTimer"),30,"");
    newTimer.start();
}

当以下代码运行时，console.log正在打印undefined或NaN。

function CDTimer (target, duration, callback) {
    this.target = target;
    this.duration = duration;
    this.callback = callback;
}

CDTimer.prototype.start = function() {
    this.start = new Date().getTime();
    this.interval = setInterval(this.update, 1000);
}

CDTimer.prototype.update = function() {
    console.log(this.duration, this.start);
    this.elapsed = this.duration - (new Date().getTime() - this.start) / 1000

    if (this.elapsed < 0) {
            clearInterval(this.interval);
            this.callback();
    }
    else {
        console.log(this.elapsed);
        $(this.target).text(this.elapsed);
    }
}

CDTimer.prototype.stop = function() {
    clearInterval(this.interval);
}

我一定是想念愚蠢的事。我的变量及其价值发生了什么变化？

感谢您的见解。

Answer 1

从setInterval调用的函数提供了一个this，它是窗口，而不是计时器。

你可以这样做：

CDTimer.prototype.start = function() {
    this.start = new Date().getTime();
    var _this = this;
    this.interval = setInterval(function(){_this.update()}, 1000);
}

请注意，MDN提供a detailed explanation。

编辑以下评论：如果你不想在启动功能中创建一个新变量，你可以这样做：

CDTimer.prototype.start = function() {
    this.start = new Date().getTime();
    this.interval = setInterval(function(_this){_this.update()}, 1000, this);
}

但是我不确定变量创建的移动是否提高了可读性，并且它与IE不兼容（如果你不修补它，请参阅MDN的解决方案）。

通过原型的Javascript“类” - 未定义的变量

1 个答案: