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

から呼び出される関数は、タイマーではなくウィンドウとしてsetInterval提供されます。this

あなたはこれを行うことができます：

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

MDN が詳細な説明を提供していることに注意してください。

次のコメントを編集します。開始関数で新しい変数を作成したくない場合は、次のようにすることができます。

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 に答える