javascript - Javascript 计时器未更新

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

回调绑定到不同的 this 变量。这是一种解决方法：

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