无法控制台我的方法插入到DOM中的.log HTML

Question

我正在制作一个简单的时钟应用程序，它显示当前时间，作为一种结合HTML&CSS(我对编码很陌生)。

我的代码运行良好，但我对实验时得到的意外结果感到困惑。我创建了一个类，实例化了它，然后尝试打印内部HTML，我的display()方法正在将其插入到预先存在的div(id＝"time")中。

见下文：

class Clock {
constructor() {
this.date = new Date;
this.day = this.date.getDate();
this.secs = this.date.getSeconds();
this.mins = this.date.getMinutes();
this.hours = this.date.getHours();
}
update(increment) {
this.secs += increment;
if (this.secs >= 60) {
this.secs = this.secs - 60;
this.mins++;
}
if (this.mins >= 60) {
this.mins = 0;
this.hours++;
}
if (this.hours >= 24) {
this.hours = 0;
}
}
display() {
this.update(1);
let HMS = [this.hours, this.mins, this.secs].map(item => item < 10 ? `0${item}` : item);
document.getElementById('time').innerHTML = `${HMS[0]} : ${HMS[1]} : ${HMS[2]}`;
}
run() {
setInterval(this.display.bind(this), 1000);
}
}

// TESTING
let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running
let time = document.getElementById('time'); // Retrieving element that contains the time
console.log(time.innerHTML);

<div id="time"></div>

给出空字符串！为什么它不记录我在display()方法中插入的HTML？

如上所述，我不明白为什么当我控制台.log时，作为display()方法的一部分插入到我的"time"div中的HTML没有被识别。我觉得在这个例子中有一个概念我没有掌握，我也不知道它是什么。

有人能帮忙解释一下吗？

非常感谢！

Answer 1

setInterval不会立即启动，它只会在第一次延迟(1秒)后启动。

因此，在时间段内发生任何事情之前，您的console.log会启动。

一种解决方法是调用this.display，然后设置setInterval。

演示当前问题的示例

在这个例子中，我在时间div中添加了一些文本，当您运行这个例子时，您会看到文本会显示一秒钟，并记录到控制台中。

然后，我在1.5秒后记录时间div内容，然后它显示当前时间。

class Clock {
constructor() {
this.date = new Date;
this.day = this.date.getDate();
this.secs = this.date.getSeconds();
this.mins = this.date.getMinutes();
this.hours = this.date.getHours();
}
update(increment) {
this.secs += increment;
if (this.secs >= 60) {
this.secs = this.secs - 60;
this.mins++;
}
if (this.mins >= 60) {
this.mins = 0;
this.hours++;
}
if (this.hours >= 24) {
this.hours = 0;
}
}
display() {
this.update(1);
let HMS = [this.hours, this.mins, this.secs].map(item => item < 10 ? `0${item}` : item);
document.getElementById('time').innerHTML = `${HMS[0]} : ${HMS[1]} : ${HMS[2]}`;
}
run() {
setInterval(this.display.bind(this), 1000);
}
}

// TESTING
let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running
let time = document.getElementById('time'); // Retrieving element that contains the time
console.log(time.innerHTML);
setTimeout(function(){
console.log(time.innerHTML);
}, 1500);

<div id="time">Not Updated Yet</div>

用于解决问题的演示示例

在本例中，我所做的就是立即在run函数中调用display()函数，然后设置setInterval。这样可以立即设置时间，因此可以将其记录到控制台中。

class Clock {
constructor() {
this.date = new Date;
this.day = this.date.getDate();
this.secs = this.date.getSeconds();
this.mins = this.date.getMinutes();
this.hours = this.date.getHours();
}
update(increment) {
this.secs += increment;
if (this.secs >= 60) {
this.secs = this.secs - 60;
this.mins++;
}
if (this.mins >= 60) {
this.mins = 0;
this.hours++;
}
if (this.hours >= 24) {
this.hours = 0;
}
}
display() {
this.update(1);
let HMS = [this.hours, this.mins, this.secs].map(item => item < 10 ? `0${item}` : item);
document.getElementById('time').innerHTML = `${HMS[0]} : ${HMS[1]} : ${HMS[2]}`;
}
run() {
this.display();
setInterval(this.display.bind(this), 1000);
}
}

// TESTING
let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running
let time = document.getElementById('time'); // Retrieving element that contains the time
console.log(time.innerHTML);

<div id="time"></div>

Answer 2

class Clock {
constructor() {
this.date = new Date;
this.day = this.date.getDate();
this.secs = this.date.getSeconds();
this.mins = this.date.getMinutes();
this.hours = this.date.getHours();
}
update(increment) {
this.secs += increment;
if (this.secs >= 60) {
this.secs = this.secs - 60;
this.mins++;
}
if (this.mins >= 60) {
this.mins = 0;
this.hours++;
}
if (this.hours >= 24) {
this.hours = 0;
}
}
display() {
this.update(1);
let HMS = [this.hours, this.mins, this.secs].map(item => item < 10 ? `0${item}` : item);
document.getElementById('time').innerHTML = `${HMS[0]} : ${HMS[1]} : ${HMS[2]}`;
}
run() {
setInterval(this.display.bind(this), 1000);
}
}

// TESTING
let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running
let time = document.getElementById('time'); // Retrieving element that contains the time
console.log(time);

<div id="time"></div>