Question

我知道已经有一百万个JavaScript计时器问题，但我无法想出这个问题。

#drive元素第一次更新（至0），但之后不会更新，就像setTimeout()无效或this.count++无法正常工作一样。有谁知道为什么这不起作用？

...谢谢

var timer = {
    timerRunning: false,
    count: 0,
    delay: 1000,

    tick: function() {
        $("#drive").html(this.count);
        this.count++;
        setTimeout(function(){
            if (this.timerRunning)
                this.tick();
        }, this.delay);
    },

    start: function() {
        this.timerRunning = true;
        this.tick();
    },

    stop: function() {
        this.timerRunning = false;
    }
};

timer.start();

Answer 1

this回调中的setTimeout()值不再是您的计时器对象（它将是window对象）。这就是它无法正常工作的原因。

您可以通过将闭包变量设置为对象并使用该变量来解决此问题：

tick: function() {
    $("#drive").html(this.count);
    this.count++;
    var self = this;
    setTimeout(function(){
        if (self.timerRunning)
            self.tick();
    }, this.delay);
},

Answer 2

回调绑定到另一个变量。这是一个解决方法：

    tick: function() {
        var self = this;
        $("#drive").html(this.count);
        this.count++;
        setTimeout(function(){
            if (self.timerRunning)
                self.tick();
        }, this.delay);
    }

Javascript计时器不更新

2 个答案: