0

我正在开发一个用 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);
}

我一定错过了一些愚蠢的事情。我的变量及其值发生了什么变化？

感谢您的洞察力。

4

1 回答 1

4

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

你可以这样做：

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

请注意，MDN 提供了详细的解释。

编辑以下评论：如果您不想在 start 函数中创建新变量，您可以这样做：

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

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

于 2012-09-19T09:27:20.597 回答