Question

我想在javascript中构建一个小型秒表。问题是存储时间（秒，分钟，小时）的变量总是未定义且不增加。我找不到错误！问题出在这里？任何解决方案？

Test.timer = {
    seconds : 0,
    minutes : 0, 
    hours : 0,
    timeout : null,
    running : 0,

    tick: function() {
        var self = this;
        self.timeout = setTimeout(self.add, 1000);
    },

    add: function() {
        var self = this;

        self.seconds++;
        if (self.seconds >= 60) {
            self.seconds = 0;
            self.minutes++;
            if (self.minutes >= 60) {
                self.minutes = 0;
                self.hours++;
            }
        }

        var time = document.getElementById("time");
        time.textContent = (self.hours ? (self.hours > 9 ? self.hours : "0" + self.hours) : "00") + ":" + (self.minutes ? (self.minutes > 9 ? self.minutes : "0" + self.minutes) : "00") + ":" + (self.seconds > 9 ? self.seconds : "0" + self.seconds);

        self.tick();
    },

    start: function() {
        var self = this;
        if (self.running == 0) {
            self.running = 1;
            self.tick();
        }
    },

    stop: function() {
        var self = this;
        self.running = 0;
        clearTimeout(self.timeout);
    }
};

我在时间标签中得到的结果是：“00：00：0NaN”！请帮忙..

Answer 1

因为范围是窗口而不是计时器

self.timeout = setTimeout(self.add, 1000);

需要

self.timeout = setTimeout( function() { self.add(); }, 1000);

或

self.timeout = setTimeout(this.add.bind(this), 1000);

Answer 2

tick中的代码没有做任何事情来确保this中的add是对您的对象的引用。实际上，您的代码在功能上与此相同：

tick: function() {
    this.timeout = setTimeout(this.add, 1000);
},

在JavaScript中，this主要由函数调用而非其定义的位置设置。如果self已关闭add，则您使用的self诀窍会有效，但它没有。

由于timer是单身，因此您可以在Test.timer的任何地方使用this并以此方式解决问题。

add: function() {
    var self = Test.timer;
    // ...the rest is unchanged...
},

（以及您使用this或var self = this;的其他类似地点

如果您不想这样做（或者如果您将来需要使用非单身人士），您可以使用ES5 Function#bind（可以使用shimmed /在旧浏览器上填充）：

tick: function() {
    this.timeout = setTimeout(this.add.bind(this), 1000);
},

Function#bind返回一个函数，当调用该函数时，将调用原始函数，并将this设置为您提供的值。

更多探索（在我的博客上）：

数字变量始终未定义

2 个答案: